:root { font-family: Arial, sans-serif; color: #17223f; background: #f4f8ff; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
.position-app { width: min(1080px, calc(100% - 28px)); margin: 0 auto 36px; }
.position-header { padding: 28px 0 18px; }
.back-link { color: #5d45bd; font-size: .8rem; font-weight: 900; letter-spacing: .12em; }
h1 { margin: 10px 0 6px; color: #3d34bd; font-size: clamp(2rem, 5vw, 3.25rem); }
.position-header p { margin: 0; font-size: 1.08rem; }
.quiz-panel { padding: clamp(16px, 3vw, 32px); border: 1px solid #dfe7f4; border-radius: 24px; background: white; box-shadow: 0 15px 40px #233a6514; }
.question-navigation { padding: 14px; border: 1px solid #ddd7ff; border-radius: 16px; background: #f4f1ff; color: #4c3bb8; }
.question-numbers { display: grid; grid-template-columns: repeat(20, minmax(28px, 1fr)); gap: 6px; margin-top: 10px; }
.question-jump { min-height: 30px; padding: 3px; border: 1px solid #c9c1ee; border-radius: 7px; background: white; color: #4639aa; font-size: .78rem; font-weight: 900; }
.question-jump.current { background: #5749ce; color: white; box-shadow: 0 0 0 2px #c9c3ff; }
.question-jump.solved:not(.current) { border-color: #55aa7a; background: #ddf7e8; color: #176c43; }
.start-row { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 0 6px; }
.start-row[hidden] { display: none; }
.quiz-mode-picker { display: grid; grid-template-columns: 1fr 1fr; width: min(440px, 100%); padding: 5px; border: 1px solid #d3cdef; border-radius: 14px; background: #f1efff; }
.quiz-mode-picker button { border: 0; border-radius: 10px; padding: 11px; background: transparent; color: #5146a5; font-weight: 900; }
.quiz-mode-picker button.active { background: white; color: #3326aa; box-shadow: 0 3px 10px #392b8620; }
.start-button { border: 0; border-radius: 14px; padding: 15px 25px; background: #5749ce; color: white; font-size: 1.08rem; font-weight: 900; box-shadow: 0 8px 18px #33258f30; }
.progress-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 28px; color: #5143bc; }
.progress-labels { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.difficulty-marker { display: flex; align-items: center; gap: 7px; min-height: 52px; padding: 4px 10px 4px 5px; border: 2px solid #e0a33f; border-radius: 16px; background: #fff4d9; color: #874b16; box-shadow: 0 4px 10px #8b5b2025; font-size: .72rem; font-weight: 900; letter-spacing: .03em; }
.difficulty-marker[hidden] { display: none; }
.difficulty-marker svg { width: 66px; height: 48px; overflow: visible; filter: drop-shadow(0 3px 2px #52351d25); }
#questionType { padding: 8px 12px; border-radius: 30px; background: #e8f6ff; color: #086397; font-size: .82rem; font-weight: 900; }
.progress-track { height: 9px; margin: 14px 0 28px; overflow: hidden; border-radius: 20px; background: #e8edfa; }
#progressBar { height: 100%; background: linear-gradient(90deg, #5265d9, #48b99a); transition: width .25s; }
h2 { margin: 0 0 12px; text-align: center; font-size: clamp(1.35rem, 3vw, 2.15rem); }
#prompt { scroll-margin-top: 12px; }
.audio-row { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 12px; }
.audio-row button { border: 0; border-radius: 24px; padding: 10px 17px; background: #e9ebff; color: #332ba4; font-weight: 800; }
#audioStatus { color: #6b7590; font-size: .82rem; }
.activity { display: grid; place-items: center; min-height: 330px; }
.scene { position: relative; width: min(620px, 100%); height: 330px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#dff4ff 0 63%, #dff3d3 63% 100%); }
.scene::after { content: ""; position: absolute; left: 0; right: 0; top: 63%; height: 3px; background: #a9cf98; }
.scene-item, .scene-anchor { position: absolute; display: grid; place-items: center; width: 86px; height: 86px; border: 0; background: transparent; font-size: 64px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304624); z-index: 3; }
button.scene-item { border-radius: 16px; }
button.scene-item:hover, button.scene-item:focus-visible { background: #ffffffb8; outline: 3px solid #8171dd; }
.scene-item.wrong { background: #ffe4e8; outline: 3px solid #d33549; animation: shake .25s linear 2; }
.scene-item.correct { background: #e0f8e9; outline: 4px solid #36a56c; }
.scene-item.paintable { filter: none; }
.scene-emoji { display: block; filter: drop-shadow(0 7px 4px #25304624); }
.scene-item.paintable .scene-emoji { filter: grayscale(1) drop-shadow(0 7px 4px #25304624); transition: filter .22s ease, transform .22s ease; }
.scene-item.painted { color: var(--paint); background: color-mix(in srgb, var(--paint) 24%, white); box-shadow: 0 0 0 8px color-mix(in srgb, var(--paint) 34%, transparent); }
.scene-item.painted .scene-emoji { filter: var(--paint-filter) drop-shadow(0 7px 4px #25304624); transform: scale(1.06); }
.paint-red { --paint-filter: grayscale(1) sepia(1) saturate(10) hue-rotate(315deg) brightness(.95); }
.paint-yellow { --paint-filter: grayscale(1) sepia(1) saturate(9) hue-rotate(4deg) brightness(1.08); }
.paint-blue { --paint-filter: grayscale(1) sepia(1) saturate(9) hue-rotate(165deg) brightness(.9); }
.paint-green { --paint-filter: grayscale(1) sepia(1) saturate(8) hue-rotate(72deg) brightness(.92); }
.paint-orange { --paint-filter: grayscale(1) sepia(1) saturate(10) hue-rotate(338deg) brightness(1.02); }
.paint-purple { --paint-filter: grayscale(1) sepia(1) saturate(9) hue-rotate(220deg) brightness(.9); }
.pos-left { left: 18%; top: 52%; }.pos-right { left: 82%; top: 52%; }.pos-top { left: 50%; top: 18%; }.pos-on { left: 50%; top: 28%; }.pos-upper-shelf { left: 56%; top: 36%; z-index: 5; }.pos-lower-shelf { left: 44%; top: 67%; z-index: 5; }.pos-bottom { left: 50%; top: 84%; }
.pos-mid-left { left: 29%; top: 52%; }.pos-mid-right { left: 65%; top: 52%; }.pos-far-right { left: 89%; top: 52%; }
.pos-center, .pos-inside { left: 50%; top: 50%; }.pos-inside-left { left: 43%; top: 55%; z-index: 5; }.pos-inside-right { left: 57%; top: 55%; z-index: 5; }.pos-front { left: 50%; top: 66%; z-index: 5; }.pos-behind { left: 50%; top: 37%; z-index: 1; opacity: .82; }.pos-outside { left: 84%; top: 79%; }
.scene-anchor { left: 50%; top: 52%; width: 126px; height: 126px; font-size: 92px; z-index: 2; }
.scene-anchor.full-person-anchor { top: 55%; width: 108px; height: 194px; }
.scene-anchor.full-person-anchor svg, .scene-item.full-person-item svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-item.full-person-item { width: 88px; height: 156px; overflow: visible; border-radius: 0; }
.scene-item.full-person-item.full-child-front { top: 61%; width: 112px; height: 202px; z-index: 7; }
.scene-item.full-person-item.full-child-front svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-anchor.full-basket { top: 59%; width: 230px; height: 180px; }
.scene-anchor.full-basket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.basket-front-overlay { position: absolute; left: 50%; top: 59%; z-index: 6; display: block; width: 230px; height: 180px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304624); }
.basket-front-overlay svg { display: block; width: 100%; height: 100%; overflow: visible; }
.full-basket-scene .scene-item.pos-inside-left, .full-basket-scene .scene-item.pos-inside-right { top: calc(59% - 12px); width: 58px; height: 64px; font-size: 46px; z-index: 5; }
.full-basket-scene .scene-item.pos-inside-left { left: calc(50% - 30px); }
.full-basket-scene .scene-item.pos-inside-right { left: calc(50% + 30px); }
.scene-anchor.large-basket { top: 60%; width: 240px; height: 190px; }
.scene-anchor.large-basket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.large-basket-front-overlay { position: absolute; left: 50%; top: 60%; z-index: 7; display: block; width: 240px; height: 190px; pointer-events: none; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304624); }
.large-basket-front-overlay svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-anchor.woven-basket { top: 59%; width: 190px; height: 148px; }
.scene-anchor.woven-basket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-anchor.stone-anchor { top: 58%; width: 150px; height: 110px; }
.scene-anchor.stone-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-anchor.flowerpot-anchor { top: 66%; width: 140px; height: 105px; }
.scene-anchor.flowerpot-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene-anchor.pond-anchor { top: 65%; width: 260px; height: 135px; }
.scene-anchor.pond-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pond-scene .scene-item.pos-inside { top: 63%; z-index: 6; font-size: 48px; }
.pond-scene .scene-item.pos-right { top: 65%; }
.potted-scene .scene-item.pos-on { left: 50%; top: 43%; z-index: 6; }
.basket-scene .scene-item.pos-inside { top: calc(60% - 10px); font-size: 54px; z-index: 6; }
.box-scene .scene-item.pos-on { top: 29%; z-index: 6; }
.scene-anchor.bookshelf-anchor { top: 53%; width: 190px; height: 245px; }
.scene-anchor.bookshelf-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bookshelf-scene .scene-item.pos-upper-shelf, .bookshelf-scene .scene-item.pos-lower-shelf { width: 54px; height: 64px; font-size: 47px; }
.scene-anchor.tree-nest { top: 60%; width: 150px; height: 190px; }
.scene-anchor.tree-nest svg { display: block; width: 100%; height: 100%; overflow: visible; }
.token-tray { width: fit-content; min-width: 220px; margin: 0 auto 14px; padding: 9px 16px; border: 2px dashed #7562d6; border-radius: 16px; text-align: center; background: #f7f3ff; }
.token-tray p { margin: 0 0 6px; color: #5a48a4; font-size: .84rem; font-weight: 800; }
.drag-token { min-width: 72px; min-height: 64px; border: 2px solid #6553cc; border-radius: 13px; background: white; font-size: 2.55rem; touch-action: none; user-select: none; }
.drag-token.picked { outline: 4px solid #9b90ef; }
.color-tray { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; width: fit-content; max-width: 100%; margin: 0 auto 15px; padding: 10px 14px; border: 2px dashed #7562d6; border-radius: 16px; background: #f7f3ff; }
.color-tray[hidden] { display: none; }
.color-tray strong { width: 100%; color: #5948a4; text-align: center; font-size: .85rem; }
.crayon-button { display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 2px solid #d3ceef; border-radius: 9px; background: white; }
.crayon-button span { position: relative; display: block; width: 15px; height: 34px; border: 2px solid #34364a; border-radius: 3px 3px 5px 5px; background: var(--crayon); transform: rotate(22deg); box-shadow: inset 0 -7px 0 #ffffff42; }
.crayon-button span::before { content: ""; position: absolute; left: -2px; top: -9px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid #34364a; }
.crayon-button.active { border-color: var(--crayon); background: color-mix(in srgb, var(--crayon) 18%, white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--crayon) 30%, transparent); transform: translateY(-2px); }
.place-board { position: relative; width: min(620px, 100%); height: 350px; border: 3px solid #d8e5f3; border-radius: 20px; background: #faffff; }
.memory-board { position: relative; display: flex; align-items: center; justify-content: space-around; width: min(620px, 100%); height: 330px; padding: 35px 50px 55px; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e3f5ff 0 68%, #e3f4d8 68% 100%); }
.memory-balloon, .memory-option { position: relative; display: block; width: 92px; height: 150px; border: 0; background: transparent; }
.memory-balloon.memory-left { transform: translateY(24px); }.memory-balloon.memory-center { transform: translateY(-25px); }.memory-balloon.memory-right { transform: translateY(12px); }
.balloon-shape { position: absolute; left: 50%; top: 4px; width: 76px; height: 92px; border: 5px solid #292f3a; border-radius: 50% 50% 48% 48%; background: var(--balloon); transform: translateX(-50%); box-shadow: inset -12px -10px 0 #00000016, inset 13px 12px 0 #ffffff38; }
.balloon-shape::after { content: ""; position: absolute; left: 50%; bottom: -13px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0; border-top: 15px solid var(--balloon); transform: translateX(-50%); }
.balloon-string { position: absolute; left: 50%; top: 103px; width: 2px; height: 43px; background: #59616c; transform: translateX(-50%); }
.memory-red { --balloon: #ef4b4b; }.memory-blue { --balloon: #378ee5; }.memory-green { --balloon: #49ad5b; }.memory-yellow { --balloon: #f5ca38; }
.memory-note { position: absolute; left: 0; right: 0; bottom: 17px; color: #5143bc; text-align: center; }
.memory-board.answering { justify-content: space-around; gap: 12px; }
.memory-option { height: 145px; border-radius: 16px; cursor: pointer; }
.memory-option:hover, .memory-option:focus-visible { outline: 3px solid #8171dd; background: #ffffffb8; }
.memory-option.wrong { outline: 3px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.memory-option.correct { outline: 4px solid #36a56c; background: #e0f8e9; }
.room-memory-board { position: relative; width: min(620px, 100%); height: 350px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#fff8e9 0 70%, #d9ad78 70% 100%); }
.room-window { position: absolute; left: 8%; top: 8%; display: grid; grid-template-columns: 1fr 1fr; width: 105px; height: 92px; padding: 5px; gap: 3px; border: 8px solid #8a552f; background: #bfe9ff; }
.room-window span { border: 1px solid #6ea9c5; background: #dff5ff; }
.room-clock { position: absolute; left: 51%; top: 8%; font-size: 54px; transform: translateX(-50%); }
.room-bed { position: absolute; left: 27%; top: 42%; width: 270px; height: 105px; border: 8px solid #74472d; border-radius: 13px 13px 5px 5px; background: #f4c4ce; }
.room-bed::after { content: ""; position: absolute; left: -15px; right: -15px; bottom: -17px; height: 17px; border-radius: 5px; background: #74472d; }
.room-pillow { position: absolute; left: 14px; top: 13px; width: 75px; height: 42px; border: 3px solid #a67382; border-radius: 18px; background: white; }
.room-blanket { position: absolute; right: 0; top: 0; width: 145px; height: 97px; border-left: 5px solid #3e76aa; background: #68a9dc; }
.room-lamp { position: absolute; right: 9%; top: 35%; font-size: 52px; }
.room-chair { position: absolute; right: 8%; bottom: 18%; font-size: 58px; }
.room-book { position: absolute; left: 12%; bottom: 17%; font-size: 46px; transform: rotate(-10deg); }
.room-ball { position: absolute; left: 45%; bottom: 7%; z-index: 2; font-size: 48px; }
.room-rug { position: absolute; left: 31%; bottom: -9%; width: 260px; height: 88px; border: 5px solid #b84e62; border-radius: 50%; background: repeating-linear-gradient(90deg, #f09aad 0 18px, #ffd6de 18px 36px); }
.room-memory-board.answering { display: flex; align-items: center; justify-content: center; gap: 42px; background: #f7fbff; }
.room-memory-option { display: grid; place-items: center; width: 105px; height: 105px; border: 3px solid #d3ceef; border-radius: 16px; background: white; font-size: 62px; }
.room-memory-option:hover, .room-memory-option:focus-visible { outline: 3px solid #8171dd; }
.room-memory-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.room-memory-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.detective-activity { display: grid; gap: 14px; width: min(780px, 100%); }
.detective-briefing { display: grid; grid-template-columns: 130px 1fr; align-items: center; min-height: 160px; overflow: hidden; border: 3px solid #d7b66f; border-radius: 8px; background: #fff7dd; }
.detective-briefing img { align-self: end; width: 128px; height: 150px; object-fit: contain; object-position: bottom; }
.detective-clues { padding: 12px 20px 12px 5px; color: #3f2d20; }
.detective-clues strong { display: block; margin-bottom: 7px; color: #7a401f; font-size: 1.08rem; }
.detective-clues ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; padding-left: 24px; font-weight: 800; }
.detective-scene { position: relative; width: 100%; height: 440px; overflow: hidden; border: 4px solid #91b574; border-radius: 8px; background: linear-gradient(#bfeaff 0 57%, #89c968 57% 100%); box-shadow: inset 0 -34px 0 #76b65a; }
.detective-scene::after { content: ""; position: absolute; left: 33%; right: -8%; bottom: -14%; height: 47%; border-radius: 50% 0 0 0; background: #e9c88d; transform: rotate(-4deg); opacity: .82; }
.detective-sun, .detective-cloud, .detective-tree, .detective-house, .detective-bench { position: absolute; z-index: 2; filter: drop-shadow(0 5px 3px #25304625); }
.detective-sun { right: 5%; top: 4%; font-size: 60px; }.detective-cloud { font-size: 55px; opacity: .92; }.cloud-one { left: 6%; top: 5%; }.cloud-two { left: 50%; top: 9%; font-size: 42px; }
.detective-tree { left: 25%; top: 44%; font-size: 150px; transform: translate(-50%, -50%); }
.detective-house { left: 84%; top: 60%; font-size: 125px; transform: translate(-50%, -50%); }
.detective-bench { left: 52%; top: 66%; font-size: 83px; transform: translate(-50%, -50%); }
.detective-lake { position: absolute; left: -5%; bottom: -5%; z-index: 1; width: 38%; height: 32%; border: 6px solid #d4c38b; border-radius: 50%; background: #58bce4; transform: rotate(-5deg); box-shadow: inset 0 10px 0 #a6e7f5; }
.detective-lake span, .detective-lake::before, .detective-lake::after { content: ""; position: absolute; height: 5px; border-radius: 50%; background: #d4f5ff; }.detective-lake span { left: 22%; top: 38%; width: 45%; }.detective-lake::before { left: 45%; top: 61%; width: 34%; }.detective-lake::after { left: 9%; top: 70%; width: 26%; }
.detective-fence { position: absolute; left: 59%; top: 47%; z-index: 2; display: flex; gap: 18px; width: 23%; height: 120px; border-top: 15px solid #d49a5d; border-bottom: 15px solid #d49a5d; transform: rotate(-2deg); filter: drop-shadow(0 4px 2px #25304620); }
.detective-fence i { width: 15px; height: 135px; margin-top: -23px; border-radius: 5px 5px 0 0; background: #b8753e; }
.detective-animal { position: absolute; left: var(--x); top: var(--y); z-index: 5; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 48px; line-height: 1; transform: translate(-50%, -50%); }
.detective-animal span { filter: drop-shadow(0 5px 3px #2530463b); transition: transform .2s ease; }.detective-animal:hover span, .detective-animal:focus-visible span { transform: scale(1.16); }.detective-animal:focus-visible { outline: 4px solid #5749ce; background: #ffffffc9; }
.detective-animal.wrong { outline: 4px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.detective-animal.correct { outline: 5px solid #2c9d61; background: #dbf7e5; box-shadow: 0 0 0 8px #ffffffb8; }
.compound-scene { position: relative; width: min(620px, 100%); height: 340px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#dff4ff 0 63%, #dff3d3 63% 100%); }
.compound-tree { position: absolute; left: 35%; top: 41%; z-index: 3; font-size: 105px; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304624); }
.compound-bench { position: absolute; left: 68%; top: 56%; z-index: 3; width: 220px; height: 125px; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304624); }
.compound-bench svg { display: block; width: 100%; height: 100%; }
.compound-animal { position: absolute; display: grid; place-items: center; width: 82px; height: 82px; border: 0; border-radius: 15px; background: transparent; font-size: 62px; transform: translate(-50%, -50%); }
.compound-animal.left-place { left: 13%; top: 66%; z-index: 5; }
.compound-animal.behind-place { left: 69%; top: 41%; z-index: 1; opacity: .86; }
.compound-animal.correct-place { left: 70%; top: 75%; z-index: 5; }
.compound-animal:hover, .compound-animal:focus-visible { outline: 3px solid #8171dd; background: #ffffffb8; }
.compound-animal.wrong { outline: 3px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.compound-animal.correct { outline: 4px solid #36a56c; background: #e0f8e9; }
.multi-compound-scene { position: relative; width: min(620px, 100%); height: 360px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e4f5ff 0 70%, #e2f2d8 70% 100%); }
.multi-table { position: absolute; left: 47%; top: 36%; z-index: 3; width: 225px; height: 115px; transform: translate(-50%, -50%); }
.multi-table::before { content: ""; position: absolute; left: 0; top: 15px; width: 225px; height: 40px; border: 7px solid #57351f; border-radius: 50%; background: #c9864c; }
.multi-table::after { content: ""; position: absolute; left: 32px; top: 53px; width: 148px; height: 62px; border-left: 13px solid #57351f; border-right: 13px solid #57351f; }
.multi-chair { position: absolute; top: 67%; z-index: 3; font-size: 72px; transform: translate(-50%, -50%); }
.chair-left { left: 30%; }.chair-right { left: 60%; transform: translate(-50%, -50%) scaleX(-1); }.chair-far-right { left: 91%; transform: translate(-50%, -50%) scaleX(-1); }
.multi-lamp { position: absolute; left: 76%; top: 30%; z-index: 3; font-size: 66px; transform: translate(-50%, -50%); }
.multi-object { position: absolute; display: grid; place-items: center; width: 68px; height: 68px; border: 0; border-radius: 14px; background: transparent; font-size: 50px; transform: translate(-50%, -50%); z-index: 6; }
.multi-object.all-conditions { left: 45%; top: 77%; }
.multi-object.above-table { left: 47%; top: 14%; }
.multi-object.right-lamp { left: 76%; top: 76%; }
.multi-object.outside-chairs { left: 12%; top: 76%; }
.multi-object:hover, .multi-object:focus-visible { outline: 3px solid #8171dd; background: #ffffffb8; }
.multi-object.wrong { outline: 3px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.multi-object.correct { outline: 4px solid #36a56c; background: #e0f8e9; }
.order-activity { width: min(620px, 100%); }
.order-tray { display: flex; justify-content: center; gap: 22px; min-height: 105px; margin-bottom: 16px; padding: 12px; border: 2px dashed #7562d6; border-radius: 16px; background: #f7f3ff; }
.order-token { width: 78px; height: 78px; border: 2px solid #cfc8ef; border-radius: 14px; background: white; font-size: 52px; touch-action: none; }
.order-token.picked { outline: 4px solid #8a7ee1; transform: translateY(-3px); }
.order-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; padding: 48px 36px 52px; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e5f6ff 0 68%, #e2f3d8 68% 100%); }
.order-board::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 5px; border-radius: 10px; background: #8bb37d; }
.order-slot { position: relative; z-index: 2; height: 112px; border: 3px dashed #786fc5; border-radius: 17px; background: #ffffffd9; font-size: 65px; }
.order-slot.filled { border-style: solid; }.order-slot.correct { border-color: #36a56c; background: #e0f8e9; }.order-slot.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.order-direction { position: absolute; bottom: 15px; color: #5143bc; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.left-label { left: 38px; }.right-label { right: 38px; }
.scene-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(720px, 100%); }
.scene-choice-card { position: relative; height: 220px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 16px; background: linear-gradient(#dff4ff 0 66%, #dff3d3 66% 100%); }
.scene-choice-card:hover, .scene-choice-card:focus-visible { outline: 3px solid #8171dd; }
.scene-choice-card.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.scene-choice-card.correct { border-color: #36a56c; outline: 4px solid #36a56c; }
.scene-choice-card > span { position: absolute; display: block; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 3px #25304625); }
.mini-house { left: 50%; top: 51%; z-index: 3; font-size: 76px; }
.mini-dog { left: 45%; font-size: 44px; }.mini-dog.mini-behind { top: 37%; z-index: 1; opacity: .85; }.mini-dog.mini-front { top: 68%; z-index: 5; }
.mini-ball { left: 57%; font-size: 37px; }.mini-ball.mini-front { top: 75%; z-index: 6; }.mini-ball.mini-behind { top: 37%; z-index: 1; opacity: .75; }
.mini-tree { top: 48%; z-index: 3; font-size: 70px; }.mini-tree.mini-right { left: 83%; }.mini-tree.mini-left { left: 17%; }
.facing-pair-scene { position: relative; width: min(620px, 100%); height: 410px; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e4f5ff 0 72%, #e1f2d7 72% 100%); }
.pair-child { position: absolute; left: 50%; width: 135px; height: 164px; transform: translateX(-50%); }
.pair-child.boy { top: 18px; }.pair-child.girl { top: 180px; }
.child-head { position: absolute; left: 50%; top: 0; width: 66px; height: 66px; border: 5px solid #5a3828; border-radius: 48% 48% 44% 44%; background: #f2bd91; transform: translateX(-50%); box-shadow: inset 0 15px 0 #70442d; }
.boy .child-head i::before, .boy .child-head i::after { content: ""; position: absolute; top: 34px; width: 6px; height: 7px; border-radius: 50%; background: #2f3037; }
.boy .child-head i::before { left: 17px; }.boy .child-head i::after { right: 17px; }
.girl .child-head { width: 72px; height: 72px; background: #75452f; box-shadow: inset 0 13px 0 #513021; }
.girl .child-head::before, .girl .child-head::after { content: ""; position: absolute; top: 39px; width: 25px; height: 47px; border: 5px solid #513021; border-radius: 50% 50% 45% 45%; background: #75452f; }
.girl .child-head::before { left: -17px; transform: rotate(13deg); }.girl .child-head::after { right: -17px; transform: rotate(-13deg); }
.girl-bow { position: absolute; left: 82px; top: 5px; z-index: 4; width: 25px; height: 18px; border-radius: 50% 12% 12% 50%; background: #f05f88; transform: rotate(17deg); box-shadow: -18px 0 0 #f05f88; }
.girl-bow i { position: absolute; left: -3px; top: 5px; width: 11px; height: 11px; border: 2px solid #812b4c; border-radius: 50%; background: #ffd15c; }
.child-body { position: absolute; left: 50%; top: 60px; width: 82px; height: 62px; border: 5px solid #334564; border-radius: 18px 18px 8px 8px; background: #4b8bd4; transform: translateX(-50%); }
.girl .child-body { top: 65px; background: #e96f91; }
.girl .child-body::after { content: ""; position: absolute; left: 50%; bottom: -24px; width: 96px; height: 35px; border: 5px solid #694073; border-radius: 8px 8px 22px 22px; background: #b765b8; transform: translateX(-50%); }
.child-arm { position: absolute; top: 75px; width: 13px; height: 55px; border: 4px solid #303847; border-radius: 10px; background: #f2bd91; }.child-arm.arm-left { left: 8px; transform: rotate(18deg); }.child-arm.arm-right { right: 8px; transform: rotate(-18deg); }
.child-leg { position: absolute; top: 116px; width: 18px; height: 45px; border: 4px solid #303847; border-radius: 8px; background: #355b94; }.child-leg.leg-left { left: 39px; }.child-leg.leg-right { right: 39px; }.girl .child-leg { top: 133px; background: #794fa8; }
.pair-child strong { position: absolute; left: 50%; top: 82px; z-index: 6; color: white; font-size: .65rem; letter-spacing: 0; white-space: nowrap; text-shadow: 0 1px 2px #1e2948; transform: translateX(-50%); }
.girl strong { top: 89px; font-size: .54rem; }
.pair-ball { position: absolute; left: 34%; top: 68px; z-index: 5; font-size: 52px; transform: translate(-50%, -50%); }
.pair-look-line { position: absolute; left: 59%; top: 142px; color: #6d61bf; font-size: 42px; font-weight: 900; }
.pair-choices { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 16px; transform: translateX(-50%); }
.pair-choices button { min-width: 175px; padding: 13px 16px; border: 2px solid #cfc8ef; border-radius: 13px; background: white; color: #493bab; font-weight: 900; }
.pair-choices button.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.pair-choices button.correct { border-color: #36a56c; background: #e0f8e9; }
.depth-scene { position: relative; width: min(620px, 100%); height: 360px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e2f4ff 0 67%, #dff2d4 67% 100%); perspective: 700px; }
.depth-scene::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 42px; height: 25px; border-radius: 50%; background: #6371812b; filter: blur(8px); }
.depth-instruction { position: absolute; left: 0; right: 0; top: 18px; z-index: 10; color: #493bab; text-align: center; font-size: 1.05rem; }
.depth-animal { position: absolute; display: grid; place-items: center; border: 0; border-radius: 18px; background: transparent; transform: translate(-50%, -50%); transition: transform .18s; }
.depth-back { left: 42%; top: 39%; z-index: 1; width: 90px; height: 90px; font-size: 68px; opacity: .84; filter: saturate(.75) drop-shadow(0 4px 3px #26334222); }
.depth-middle { left: 51%; top: 54%; z-index: 3; width: 112px; height: 112px; font-size: 84px; filter: drop-shadow(0 7px 4px #2633422b); }
.depth-front { left: 61%; top: 68%; z-index: 5; width: 140px; height: 140px; font-size: 108px; filter: drop-shadow(0 11px 6px #26334242); }
.depth-animal.full-fox { left: 40%; width: 150px; height: 102px; opacity: 1; }
.depth-animal.full-fox svg { display: block; width: 100%; height: 100%; overflow: visible; }
.depth-animal:hover, .depth-animal:focus-visible { outline: 3px solid #8171dd; background: #ffffff9e; }
.depth-animal.wrong { outline: 3px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.depth-animal.first-correct { outline: 4px solid #54a9d8; background: #e3f5ffb8; }.depth-animal.correct { outline: 4px solid #36a56c; background: #e0f8e9; }
.length-order-activity { width: min(720px, 100%); }
.stick-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; padding: 12px; border: 2px dashed #7562d6; border-radius: 16px; background: #f7f3ff; }
.stick-token { display: grid; place-items: center; min-width: 0; height: 52px; border: 2px solid #d0caef; border-radius: 11px; background: white; overflow: hidden; touch-action: none; }
.stick-token span, .placed-stick { display: block; width: min(var(--stick-length), 92%); height: 16px; border: 3px solid #70451f; border-radius: 10px; background: linear-gradient(#efc36d, #cf8d3e); box-shadow: inset 0 3px 0 #fff4b8; }
.stick-token.picked { outline: 4px solid #8a7ee1; transform: translateY(-2px); }
.stick-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 24px 12px; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e5f6ff 0 70%, #e2f3d8 70% 100%); }
.stick-slot { display: grid; place-items: center; min-width: 0; height: 95px; border: 3px dashed #786fc5; border-radius: 14px; background: #ffffffd9; overflow: hidden; }
.stick-slot.filled { border-style: solid; }.stick-slot.correct { border-color: #36a56c; background: #e0f8e9; }.stick-slot.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.stick-slot .placed-stick { max-width: 96%; }
.thickness-order-activity { width: min(720px, 100%); }
.thickness-tray { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; padding: 12px; border: 2px dashed #7562d6; border-radius: 16px; background: #f7f3ff; }
.thickness-token { display: grid; place-items: center; min-width: 0; height: 58px; border: 2px solid #d0caef; border-radius: 11px; background: white; overflow: hidden; touch-action: none; }
.thickness-token span, .placed-thickness-stick { display: block; width: 82%; height: var(--stick-thickness); max-height: 38px; border: 3px solid #70451f; border-radius: 12px; background: linear-gradient(#efc36d, #cf8d3e); box-shadow: inset 0 3px 0 #fff4b8; }
.thickness-token.picked { outline: 4px solid #8a7ee1; transform: translateY(-2px); }
.thickness-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 24px 12px; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#e5f6ff 0 70%, #e2f3d8 70% 100%); }
.thickness-slot { display: grid; place-items: center; min-width: 0; height: 95px; border: 3px dashed #786fc5; border-radius: 14px; background: #ffffffd9; overflow: hidden; }
.thickness-slot.filled { border-style: solid; }.thickness-slot.correct { border-color: #36a56c; background: #e0f8e9; }.thickness-slot.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.placed-thickness-stick { width: 88%; }
.attribute-grid { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 14px; width: min(720px, 100%); padding: 18px; border: 3px solid #d8e5f3; border-radius: 20px; background: #eff9ff; }
.attribute-item { display: grid; place-items: center; height: 140px; border: 2px solid #d4dcec; border-radius: 14px; background: white; }
.attribute-item span { display: block; width: 58px; height: 58px; border: 5px solid #313848; background: var(--item-color); box-shadow: inset 8px 8px 0 #ffffff35, 0 7px 5px #26334225; }
.attribute-item.attr-large span { width: 94px; height: 94px; }.attribute-item.attr-circle span { border-radius: 50%; }
.attribute-item.attr-triangle span { width: 0; height: 0; border: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 67px solid var(--item-color); background: transparent; filter: drop-shadow(0 5px 2px #26334235); box-shadow: none; }
.attr-red { --item-color: #e84b53; }.attr-blue { --item-color: #398ee4; }.attr-green { --item-color: #4eac5d; }.attr-yellow { --item-color: #f2c43d; }.attr-purple { --item-color: #9259c9; }
.attribute-item:hover, .attribute-item:focus-visible { outline: 3px solid #8171dd; }.attribute-item.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.attribute-item.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.pattern-activity { display: grid; grid-template-columns: minmax(300px, 430px) minmax(145px, 220px); align-items: center; gap: 20px; width: min(720px, 100%); }
.pattern-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px; border: 3px solid #d8e5f3; border-radius: 18px; background: #edf8ff; }
.pattern-cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 2px solid #c8d8e9; border-radius: 10px; background: white; }
.pattern-cell.missing { border: 3px dashed #7562d6; background: #f6f2ff; color: #5948b0; font-size: 2.6rem; font-weight: 900; }.pattern-cell.completed { border: 3px solid #36a56c; background: #e0f8e9; }
.pattern-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.pattern-option { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 2px solid #d0caef; border-radius: 12px; background: white; }
.pattern-option:hover, .pattern-option:focus-visible { outline: 3px solid #8171dd; }.pattern-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.pattern-option.correct { border-color: #36a56c; background: #e0f8e9; }
.pattern-symbol { display: block; width: 48%; aspect-ratio: 1; border: 4px solid #303847; background: var(--pattern-color); box-shadow: inset 6px 6px 0 #ffffff35, 0 5px 4px #26334220; }
.pattern-small { width: 34%; }.pattern-medium { width: 50%; }.pattern-large { width: 68%; }.pattern-circle { border-radius: 50%; }
.pattern-triangle { width: 0; aspect-ratio: auto; border: 0; border-left: 29px solid transparent; border-right: 29px solid transparent; border-bottom: 54px solid var(--pattern-color); background: transparent; box-shadow: none; filter: drop-shadow(0 4px 2px #26334230); }
.pattern-triangle.pattern-small { border-left-width: 18px; border-right-width: 18px; border-bottom-width: 34px; }.pattern-triangle.pattern-large { border-left-width: 36px; border-right-width: 36px; border-bottom-width: 66px; }
.pattern-red { --pattern-color: #e84b53; }.pattern-blue { --pattern-color: #398ee4; }.pattern-green { --pattern-color: #4eac5d; }.pattern-yellow { --pattern-color: #f2c43d; }.pattern-purple { --pattern-color: #9259c9; }
.sequence-activity { width: min(720px, 100%); }
.sequence-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 17px; padding: 16px; border: 3px solid #d8e5f3; border-radius: 18px; background: #edf8ff; }
.sequence-cell, .sequence-target { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 2px solid #c8d8e9; border-radius: 12px; background: white; }
.sequence-target { border: 3px dashed #7562d6; color: #5948b0; font-size: 2.5rem; font-weight: 900; }.sequence-target.correct { border: 3px solid #36a56c; background: #e0f8e9; }
.sequence-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; border: 2px dashed #7562d6; border-radius: 16px; background: #f7f3ff; }
.sequence-option { display: grid; place-items: center; height: 104px; border: 2px solid #d0caef; border-radius: 12px; background: white; touch-action: none; }
.sequence-option.picked { outline: 4px solid #8a7ee1; transform: translateY(-2px); }.sequence-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.path-trace-board { position: relative; width: min(720px, 100%); aspect-ratio: 620 / 340; min-height: 300px; border: 3px solid #d8e5f3; border-radius: 20px; background: #fbfdff; overflow: hidden; }
.path-trace-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-path .trace-outline { fill: none; stroke: #20242b; stroke-width: 14px; stroke-linecap: round; stroke-linejoin: round; }
.trace-path .trace-core { fill: none; stroke: #fff4cf; stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round; }
.path-goal { position: absolute; right: 2%; z-index: 4; font-size: 48px; transform: translateY(-50%); }.goal-a { top: 21%; }.goal-b { top: 50%; }.goal-c { top: 79%; }
.path-choice { position: absolute; left: 2%; z-index: 5; width: 52px; height: 52px; border: 3px solid currentColor; border-radius: 50%; background: white; font-size: 1.15rem; font-weight: 900; transform: translateY(-50%); }
.path-choice-0 { top: 21%; color: #20242b; }.path-choice-1 { top: 50%; color: #20242b; }.path-choice-2 { top: 79%; color: #20242b; }
.path-choice:hover, .path-choice:focus-visible { outline: 4px solid #8171dd; }.path-choice.wrong { background: #ffe4e8; animation: shake .25s linear 2; }.path-choice.correct { background: #e0f8e9; outline: 4px solid #36a56c; }
.shortest-route-board { display: grid; gap: 11px; width: min(720px, 100%); }
.shortest-route { position: relative; height: 118px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 16px; background: linear-gradient(#e5f6ff 0 72%, #e2f3d8 72% 100%); }
.shortest-route > strong { position: absolute; left: 13px; top: 10px; z-index: 6; color: #493bab; font-size: 1.15rem; }
.route-child, .route-school { position: absolute; top: 55%; z-index: 5; transform: translateY(-50%); }.route-child { left: 5%; width: 54px; height: 96px; }.route-child svg { display: block; width: 100%; height: 100%; }.route-school { right: 5%; font-size: 48px; }
.route-map { position: absolute; left: 16%; top: 9%; z-index: 4; width: 70%; height: 82%; overflow: visible; }
.route-map path { fill: none; stroke: #b97d48; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.route-map circle { fill: #5d3827; stroke: #fff6df; stroke-width: 2; }
.shortest-route:hover, .shortest-route:focus-visible { outline: 3px solid #8171dd; }.shortest-route.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.shortest-route.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.mirror-activity { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 20px; width: min(720px, 100%); }
.mirror-example { position: relative; display: grid; place-items: center; height: 300px; padding-right: 34px; border: 3px solid #d8e5f3; border-radius: 18px; background: #edf8ff; }
.mirror-original { display: block; width: 130px; height: 145px; }.mirror-original svg { width: 100%; height: 100%; }
.mirror-glass { position: absolute; right: 22px; top: 27px; bottom: 42px; width: 16px; border: 4px solid #5585a4; border-radius: 8px; background: linear-gradient(90deg, #c9efff, #eefbff, #9bd8f2); box-shadow: 5px 0 0 #365b73; }
.mirror-example strong { position: absolute; right: 4px; bottom: 12px; color: #39708f; font-size: .66rem; writing-mode: vertical-rl; }
.mirror-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.mirror-option { display: grid; place-items: center; height: 144px; border: 2px solid #d0caef; border-radius: 14px; background: white; }
.mirror-option svg { width: 92px; height: 108px; }.mirror-option:hover, .mirror-option:focus-visible { outline: 3px solid #8171dd; }.mirror-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.mirror-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.missing-piece-activity { display: grid; grid-template-columns: minmax(330px, 520px) minmax(150px, 190px); align-items: center; gap: 16px; width: min(740px, 100%); }
.missing-picture { position: relative; overflow: hidden; aspect-ratio: 520 / 280; border: 4px solid #6c87a0; border-radius: 15px; background: #cfefff; }
.missing-picture > svg { display: block; width: 100%; height: 100%; }
.missing-hole { position: absolute; left: 57.7%; top: 28.6%; display: grid; place-items: center; width: 21.2%; height: 32.1%; overflow: hidden; border: 4px dashed #6654bb; background: #ffffff; color: #5747af; font-size: 2.4rem; font-weight: 900; }
.missing-hole svg { display: block; width: 100%; height: 100%; }.missing-hole.completed { border: 2px solid #36a56c; }
.missing-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.missing-option { display: grid; place-items: center; aspect-ratio: 110 / 90; min-width: 0; padding: 3px; border: 2px solid #d0caef; border-radius: 10px; background: white; }
.missing-option svg { display: block; width: 100%; height: 100%; }.missing-option:hover, .missing-option:focus-visible { outline: 3px solid #8171dd; }.missing-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.missing-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.top-view-activity { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; align-items: center; gap: 16px; width: min(760px, 100%); }
.front-table-view { position: relative; height: 330px; border: 3px solid #d8e5f3; border-radius: 18px; background: linear-gradient(#e5f6ff 0 72%, #e2f3d8 72% 100%); }
.front-table-view strong { position: absolute; left: 0; right: 0; top: 9px; color: #493bab; text-align: center; font-size: .78rem; }.front-table-view svg { display: block; width: 100%; height: 100%; }
.top-view-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.top-view-option { display: grid; place-items: center; min-width: 0; height: 160px; padding: 4px; border: 2px solid #d0caef; border-radius: 13px; background: white; }
.top-view-option svg { display: block; width: 100%; height: 100%; }.top-view-option:hover, .top-view-option:focus-visible { outline: 3px solid #8171dd; }.top-view-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.top-view-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.direction-odd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; width: min(820px, 100%); }
.direction-card { position: relative; height: 230px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 15px; background: linear-gradient(#e5f6ff 0 68%, #e2f3d8 68% 100%); }
.direction-animal { position: absolute; left: 50%; top: 48%; width: 125px; height: 105px; transform: translate(-50%, -50%); }.direction-animal svg { display: block; width: 100%; height: 100%; }
.direction-food { position: absolute; bottom: 12px; z-index: 5; font-size: 42px; }.food-left .direction-food { left: 9px; }.food-right .direction-food { right: 9px; }
.direction-card:hover, .direction-card:focus-visible { outline: 3px solid #8171dd; }.direction-card.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.direction-card.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.exception-board { position: relative; width: min(720px, 100%); height: 350px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: #f5fbff; }
.exception-line { position: absolute; left: 5%; right: 5%; top: 52%; height: 8px; border-radius: 8px; background: #384a67; box-shadow: 0 3px 0 #ffffff; }
.exception-line::before, .exception-line::after { position: absolute; top: -28px; color: #58647b; font-size: .75rem; font-weight: 900; }.exception-line::before { content: "ИЗНАД"; left: 4px; }.exception-line::after { content: "ИСПОД"; right: 4px; top: 14px; }
.exception-item { position: absolute; display: grid; place-items: center; width: 82px; height: 82px; border: 2px solid transparent; border-radius: 14px; background: transparent; transform: translate(-50%, -50%); }
.exception-above { top: 27%; }.exception-below { top: 76%; }
.exception-item .pattern-symbol { width: 57%; }.exception-item .pattern-triangle { width: 0; }
.exception-item:hover, .exception-item:focus-visible { outline: 3px solid #8171dd; background: #ffffffc4; }.exception-item.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.exception-item.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.negative-compound-scene { position: relative; width: min(680px, 100%); height: 360px; overflow: hidden; border: 3px solid #d8e5f3; border-radius: 20px; background: linear-gradient(#dff4ff 0 66%, #dff3d3 66% 100%); }
.negative-tree, .negative-house { position: absolute; top: 49%; z-index: 3; font-size: 108px; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px #25304625); }.negative-tree { left: 35%; }.negative-house { left: 65%; }
.negative-animal { position: absolute; display: grid; place-items: center; width: 82px; height: 82px; border: 0; border-radius: 15px; background: transparent; font-size: 62px; transform: translate(-50%, -50%); }
.negative-right-front { left: 84%; top: 74%; z-index: 6; }.negative-left-front { left: 14%; top: 74%; z-index: 6; }.negative-right-behind { left: 65%; top: 39%; z-index: 1; opacity: .84; }.negative-left-behind { left: 20%; top: 35%; z-index: 1; opacity: .84; }
.negative-animal:hover, .negative-animal:focus-visible { outline: 3px solid #8171dd; background: #ffffffb8; }.negative-animal.wrong { outline: 3px solid #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.negative-animal.correct { outline: 4px solid #36a56c; background: #e0f8e9; }
.intersection-activity { display: grid; grid-template-columns: 330px 1fr; align-items: center; gap: 18px; width: min(760px, 100%); }
.intersection-venn { position: relative; height: 310px; border: 3px solid #d8e5f3; border-radius: 20px; background: #f7fbff; }
.venn-circle { position: absolute; display: grid; place-items: center; width: 175px; height: 175px; border: 4px solid currentColor; border-radius: 50%; font-size: .78rem; font-weight: 900; }.venn-animal { left: 28px; top: 35px; color: #3e7fc6; background: #62a8e52c; align-items: start; padding-top: 25px; }.venn-flies { right: 28px; top: 35px; color: #d05a75; background: #ec78932c; align-items: start; padding-top: 25px; }.venn-small { left: 78px; bottom: 15px; color: #409350; background: #66b8752c; align-items: end; padding-bottom: 25px; }
.intersection-venn > strong { position: absolute; left: 50%; top: 53%; z-index: 5; display: grid; place-items: center; width: 60px; height: 60px; border: 3px dashed #5a4bb6; border-radius: 50%; background: white; color: #5143bc; font-size: 2rem; transform: translate(-50%, -50%); }
.intersection-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.intersection-option { display: grid; place-items: center; min-width: 0; height: 112px; border: 2px solid #d0caef; border-radius: 13px; background: white; }.intersection-option.is-small { font-size: 43px; }.intersection-option.is-large { font-size: 67px; }
.intersection-option:hover, .intersection-option:focus-visible { outline: 3px solid #8171dd; }.intersection-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.intersection-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 3px solid #36a56c; }
.balance-activity { width: min(760px, 100%); }
.balance-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 14px; }
.balance-block { padding: 10px; border: 3px solid #d8e5f3; border-radius: 17px; background: #f5fbff; }.balance-block > strong { display: block; margin-bottom: 4px; color: #493bab; text-align: center; font-size: .75rem; }
.balance-scale { position: relative; height: 190px; }
.scale-rule { position: absolute; left: 11%; right: 11%; top: 77px; height: 9px; border-radius: 10px; background: #49536a; }.scale-post { position: absolute; left: 50%; top: 56px; width: 13px; height: 112px; border-radius: 8px; background: #59647a; transform: translateX(-50%); }.scale-base { position: absolute; left: 32%; right: 32%; bottom: 9px; height: 14px; border-radius: 12px; background: #59647a; }
.scale-pan { position: absolute; top: 92px; display: grid; place-items: center; width: 38%; height: 63px; border: 5px solid #69758c; border-top: 0; border-radius: 0 0 45% 45%; background: #eef1f7; }.scale-pan::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 48px; background: #69758c; transform: translateX(-50%); }.pan-left { left: 3%; }.pan-right { right: 3%; }
.answer-pan { border-style: dashed; border-color: #7562d6; cursor: pointer; }.answer-pan.correct { border-style: solid; border-color: #36a56c; background: #e0f8e9; }
.balance-question { color: #5747af; font-size: 2rem; font-weight: 900; }
.cube-group { display: flex; align-items: end; justify-content: center; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.balance-cube { display: block; width: 27px; height: 27px; border: 3px solid #343b4a; border-radius: 4px; box-shadow: inset 5px 5px 0 #ffffff35; }.yellow-cube { background: #f4c83e; }.blue-cube { background: #3b8cde; }
.balance-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 11px; border: 2px dashed #7562d6; border-radius: 15px; background: #f7f3ff; }
.balance-option { display: grid; place-items: center; min-width: 0; height: 75px; border: 2px solid #d0caef; border-radius: 11px; background: white; touch-action: none; }.balance-option.picked { outline: 4px solid #8a7ee1; transform: translateY(-2px); }.balance-option.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }.balance-option.correct { border-color: #36a56c; background: #e0f8e9; outline: 4px solid #36a56c; }
.place-anchor { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-size: 96px; filter: drop-shadow(0 7px 4px #25304624); z-index: 3; }
.place-anchor.full-person-place-anchor { top: 53%; width: 108px; height: 194px; }
.place-anchor.full-person-place-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.place-anchor.table-anchor { width: 210px; height: 150px; }
.place-anchor.table-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.place-anchor.place-basket-anchor { top: 56%; width: 250px; height: 190px; }
.place-anchor.place-basket-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.place-anchor.drawer-anchor { top: 55%; width: 190px; height: 230px; }
.place-anchor.drawer-anchor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.place-board:has(.drawer-anchor) .drop-zone[data-relation="inside"] { top: 52%; z-index: 6; width: 104px; height: 70px; }
.basket-place-board .drop-zone[data-relation="inside"] { top: 52%; z-index: 6; }
.place-anchor.between-anchor { display: flex; align-items: center; justify-content: space-between; width: 390px; height: 100px; font-size: 76px; }
.drop-zone { position: absolute; display: grid; place-items: center; width: 88px; height: 60px; padding: 4px 7px; border: 2px dashed #786fc5; border-radius: 14px; background: #f2efffdd; color: #4f45a4; font-size: .78rem; font-weight: 900; line-height: 1.05; text-align: center; z-index: 4; }
.drop-zone[data-relation="left"] { left: 3%; top: 50%; transform: translateY(-50%); }
.drop-zone[data-relation="right"] { right: 3%; top: 50%; transform: translateY(-50%); }
.drop-zone[data-relation="left"], .drop-zone[data-relation="right"] { width: 112px; padding: 0 8px; font-size: .82rem; white-space: nowrap; }
.drop-zone[data-relation="top"] { left: 50%; top: 3%; transform: translateX(-50%); }
.drop-zone[data-relation="on"] { left: 50%; top: 33%; transform: translate(-50%, -50%); z-index: 6; }
.drop-zone[data-relation="bottom"] { left: 50%; bottom: 3%; transform: translateX(-50%); }
.drop-zone[data-relation="inside"], .drop-zone[data-relation="center"] { left: 50%; top: 52%; transform: translate(-50%, -50%); }
.drop-zone[data-relation="outside"] { right: 5%; bottom: 5%; }
.drop-zone[data-relation="front"] { left: 50%; top: 68%; transform: translate(-50%, -50%); }
.drop-zone[data-relation="behind"] { left: 50%; top: 36%; height: 76px; align-items: start; padding-top: 9px; transform: translate(-50%, -50%); z-index: 1; }
.drop-zone[data-relation="behind"].correct { z-index: 1; border-color: #34a46b; background: transparent; }
.drop-zone.wrong { border-color: #d43649; background: #ffe2e7; }
.drop-zone.correct { border-color: #34a46b; border-style: solid; background: #def7e8; font-size: 2.15rem; }
.feedback { min-height: 28px; margin: 18px 0 12px; text-align: center; font-size: 1.08rem; font-weight: 900; }
.feedback.success { color: #18734a; }.feedback.error { color: #b13445; }
.nav-row { display: flex; justify-content: center; gap: 12px; }
.nav-row button, .finish-box button { border: 0; border-radius: 13px; padding: 12px 19px; background: #5749ce; color: white; font-weight: 900; }
.nav-row button:disabled { opacity: .45; cursor: default; }
.footnote { color: #66718b; text-align: center; font-size: .88rem; }
.finish-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #172037ad; backdrop-filter: blur(4px); }
.finish-overlay[hidden] { display: none; }
.finish-box { width: min(480px, 100%); padding: 36px 24px; border: 5px solid #ffc43d; border-radius: 20px; text-align: center; background: white; animation: pop .5s ease-out; }
.finish-star { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; background: #ffc43d; color: white; font-size: 62px; }
.finish-box h2 { color: #4032ba; font-size: 3rem; }.finish-box p { font-size: 1.2rem; font-weight: 800; }
@keyframes shake { 25% { transform: translate(-54%, -50%); } 75% { transform: translate(-46%, -50%); } }
@keyframes pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 640px) {
  .detective-briefing { grid-template-columns: 88px 1fr; min-height: 145px; }.detective-briefing img { width: 86px; height: 128px; }.detective-clues { padding: 9px 8px 9px 0; }.detective-clues strong { font-size: .86rem; }.detective-clues ol { grid-template-columns: 1fr; gap: 2px; padding-left: 20px; font-size: .76rem; }.detective-scene { height: 330px; }.detective-tree { font-size: 100px; }.detective-house { font-size: 84px; }.detective-bench { font-size: 58px; }.detective-sun { font-size: 42px; }.detective-cloud { font-size: 38px; }.cloud-two { font-size: 30px; }.detective-fence { gap: 9px; height: 85px; border-width: 10px 0; }.detective-fence i { width: 10px; height: 95px; margin-top: -15px; }.detective-animal { width: 45px; height: 45px; font-size: 34px; }
  .position-app { width: calc(100% - 14px); }
  .quiz-panel { padding: 13px 8px 18px; border-radius: 16px; }
  .question-navigation { padding: 9px; }
  .question-numbers { grid-template-columns: repeat(8, minmax(26px, 1fr)); gap: 5px; }
  .scene, .place-board { height: 285px; }
  .memory-board { height: 285px; padding: 28px 10px 48px; }
  .memory-balloon, .memory-option { width: 68px; height: 120px; }
  .balloon-shape { width: 58px; height: 72px; border-width: 4px; }
  .balloon-string { top: 84px; height: 34px; }
  .memory-board.answering { gap: 4px; }
  .room-memory-board { height: 300px; }
  .room-window { width: 76px; height: 68px; border-width: 6px; }
  .room-clock { font-size: 42px; }
  .room-bed { left: 19%; top: 43%; width: 210px; height: 82px; }
  .room-pillow { width: 54px; height: 31px; }.room-blanket { width: 112px; height: 74px; }
  .room-lamp { right: 5%; font-size: 42px; }.room-chair { right: 4%; font-size: 45px; }
  .room-book { left: 7%; font-size: 38px; }.room-ball { font-size: 39px; }
  .room-rug { left: 25%; width: 200px; height: 68px; }
  .room-memory-board.answering { gap: 16px; }
  .room-memory-option { width: 76px; height: 82px; font-size: 48px; }
  .compound-scene { height: 290px; }
  .compound-tree { left: 32%; font-size: 82px; }
  .compound-bench { left: 68%; width: 162px; height: 94px; }
  .compound-animal { width: 58px; height: 58px; font-size: 44px; }
  .compound-animal.left-place { left: 12%; }.compound-animal.behind-place { left: 69%; }.compound-animal.correct-place { left: 69%; }
  .multi-compound-scene { height: 310px; }
  .multi-table { left: 46%; width: 165px; height: 90px; }.multi-table::before { width: 165px; height: 31px; }.multi-table::after { left: 23px; top: 47px; width: 112px; height: 49px; border-width: 10px; }
  .multi-chair { font-size: 50px; }.chair-left { left: 24%; }.chair-right { left: 57%; }.chair-far-right { left: 91%; }
  .multi-lamp { left: 79%; font-size: 50px; }
  .multi-object { width: 52px; height: 52px; font-size: 39px; }
  .multi-object.all-conditions { left: 41%; }.multi-object.above-table { left: 46%; }.multi-object.right-lamp { left: 75%; }
  .order-tray { gap: 12px; min-height: 88px; }.order-token { width: 62px; height: 62px; font-size: 42px; }
  .order-board { gap: 9px; padding: 42px 10px 47px; }.order-slot { height: 88px; font-size: 49px; }
  .left-label { left: 13px; }.right-label { right: 13px; }
  .scene-choice-grid { gap: 8px; }.scene-choice-card { height: 168px; }
  .mini-house { font-size: 57px; }.mini-dog { font-size: 34px; }.mini-ball { font-size: 29px; }.mini-tree { font-size: 53px; }
  .facing-pair-scene { height: 390px; }.pair-ball { left: 25%; }.pair-look-line { left: 68%; }
  .pair-choices { gap: 8px; width: calc(100% - 20px); }.pair-choices button { min-width: 0; flex: 1; padding: 12px 7px; }
  .depth-scene { height: 310px; }.depth-back { width: 70px; height: 70px; font-size: 53px; }.depth-animal.full-fox { width: 112px; height: 78px; }.depth-middle { width: 88px; height: 88px; font-size: 66px; }.depth-front { width: 108px; height: 108px; font-size: 84px; }
  .stick-tray { gap: 7px; padding: 8px; }.stick-token { height: 45px; }.stick-token span { height: 13px; }
  .stick-board { gap: 6px; padding: 16px 6px; }.stick-slot { height: 82px; }.stick-slot .placed-stick { height: 13px; }
  .thickness-tray { gap: 7px; padding: 8px; }.thickness-token { height: 52px; }
  .thickness-board { gap: 6px; padding: 16px 6px; }.thickness-slot { height: 82px; }.thickness-token span, .placed-thickness-stick { max-height: 34px; }
  .attribute-grid { grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 7px; padding: 8px; }.attribute-item { height: 92px; }.attribute-item span { width: 38px; height: 38px; border-width: 4px; }.attribute-item.attr-large span { width: 64px; height: 64px; }.attribute-item.attr-triangle span { width: 0; height: 0; border-left-width: 25px; border-right-width: 25px; border-bottom-width: 48px; }
  .pattern-activity { grid-template-columns: 1fr; gap: 11px; }.pattern-matrix { width: min(330px, 100%); margin: auto; }.pattern-options { grid-template-columns: repeat(4, 1fr); }
  .pattern-option { aspect-ratio: auto; height: 75px; }.pattern-triangle { border-left-width: 22px; border-right-width: 22px; border-bottom-width: 42px; }.pattern-triangle.pattern-small { border-left-width: 14px; border-right-width: 14px; border-bottom-width: 27px; }.pattern-triangle.pattern-large { border-left-width: 27px; border-right-width: 27px; border-bottom-width: 51px; }
  .sequence-row { gap: 5px; padding: 8px; }.sequence-options { gap: 6px; padding: 8px; }.sequence-option { height: 76px; }
  .path-trace-board { min-height: 230px; }.path-goal { right: 1%; font-size: 35px; }.path-choice { left: 1%; width: 40px; height: 40px; font-size: .9rem; }
  .shortest-route { height: 96px; }.route-child { left: 4%; width: 41px; height: 74px; }.route-school { font-size: 37px; }.route-map { left: 18%; width: 66%; }
  .mirror-activity { grid-template-columns: 120px 1fr; gap: 8px; }.mirror-example { height: 250px; padding-right: 20px; }.mirror-original { width: 92px; height: 112px; }.mirror-glass { right: 10px; }.mirror-options { gap: 6px; }.mirror-option { height: 121px; }.mirror-option svg { width: 72px; height: 91px; }
  .missing-piece-activity { grid-template-columns: 1fr; gap: 10px; }.missing-picture { width: 100%; }.missing-options { grid-template-columns: repeat(4, 1fr); gap: 5px; }.missing-option { min-height: 62px; }
  .top-view-activity { grid-template-columns: 1fr; gap: 9px; }.front-table-view { height: 235px; }.front-table-view svg { height: 205px; }.top-view-options { grid-template-columns: repeat(4, 1fr); gap: 5px; }.top-view-option { height: 96px; padding: 1px; }
  .direction-odd-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }.direction-card { height: 170px; }.direction-animal { width: 94px; height: 80px; }.direction-food { font-size: 31px; }
  .exception-board { height: 300px; }.exception-item { width: 56px; height: 56px; }.exception-item .pattern-symbol { width: 65%; }.exception-line { left: 3%; right: 3%; }
  .negative-compound-scene { height: 300px; }.negative-tree, .negative-house { font-size: 82px; }.negative-tree { left: 34%; }.negative-house { left: 66%; }.negative-animal { width: 58px; height: 58px; font-size: 44px; }
  .intersection-activity { grid-template-columns: 1fr; gap: 9px; }.intersection-venn { width: 290px; height: 260px; margin: auto; }.venn-circle { width: 145px; height: 145px; }.venn-animal { left: 20px; }.venn-flies { right: 20px; }.venn-small { left: 72px; }.intersection-options { gap: 5px; }.intersection-option { height: 78px; }.intersection-option.is-small { font-size: 31px; }.intersection-option.is-large { font-size: 48px; }
  .balance-examples { gap: 6px; }.balance-block { padding: 5px; }.balance-scale { height: 160px; }.scale-rule { top: 65px; }.scale-post { top: 47px; height: 94px; }.scale-pan { top: 78px; height: 55px; width: 42%; }.pan-left { left: 1%; }.pan-right { right: 1%; }.balance-cube { width: 20px; height: 20px; border-width: 2px; }.balance-options { gap: 5px; padding: 7px; }.balance-option { height: 62px; }
  .scene-item { width: 58px; height: 58px; font-size: 43px; }
  .scene-anchor, .place-anchor { width: 90px; height: 90px; font-size: 68px; }
  .scene-anchor.full-person-anchor, .place-anchor.full-person-place-anchor { width: 78px; height: 142px; }
  .scene-item.full-person-item { width: 64px; height: 116px; }
  .scene-item.full-person-item.full-child-front { top: 62%; width: 82px; height: 150px; }
  .place-anchor.table-anchor { width: 158px; height: 116px; }
  .place-anchor.place-basket-anchor { top: 57%; width: 190px; height: 145px; }
  .basket-place-board .drop-zone[data-relation="inside"] { top: 53%; }
  .place-anchor.between-anchor { width: 230px; height: 80px; font-size: 52px; }
  .scene-anchor.tree-nest { top: 61%; width: 112px; height: 148px; }
  .scene-anchor.full-basket { top: 60%; width: 174px; height: 136px; }
  .basket-front-overlay { top: 60%; width: 174px; height: 136px; }
  .full-basket-scene .scene-item.pos-inside-left, .full-basket-scene .scene-item.pos-inside-right { top: calc(60% - 9px); width: 44px; height: 50px; font-size: 36px; }
  .full-basket-scene .scene-item.pos-inside-left { left: calc(50% - 23px); }
  .full-basket-scene .scene-item.pos-inside-right { left: calc(50% + 23px); }
  .scene-anchor.large-basket { top: 61%; width: 180px; height: 144px; }
  .large-basket-front-overlay { top: 61%; width: 180px; height: 144px; }
  .scene-anchor.woven-basket { top: 60%; width: 145px; height: 113px; }
  .scene-anchor.stone-anchor { top: 59%; width: 112px; height: 82px; }
  .scene-anchor.flowerpot-anchor { top: 66%; width: 105px; height: 79px; }
  .scene-anchor.pond-anchor { top: 66%; width: 195px; height: 102px; }
  .pond-scene .scene-item.pos-inside { top: 64%; font-size: 35px; }
  .pond-scene .scene-item.pos-right { top: 66%; }
  .potted-scene .scene-item.pos-on { top: 44%; }
  .basket-scene .scene-item.pos-inside { top: calc(61% - 8px); font-size: 39px; }
  .box-scene .scene-item.pos-on { top: 29%; }
  .scene-anchor.bookshelf-anchor { top: 54%; width: 142px; height: 190px; }
  .bookshelf-scene .scene-item.pos-upper-shelf, .bookshelf-scene .scene-item.pos-lower-shelf { width: 42px; height: 49px; font-size: 36px; }
  .scene .pos-inside-left { left: 42%; top: 57%; font-size: 34px; }
  .scene .pos-inside-right { left: 58%; top: 57%; font-size: 34px; }
  .drop-zone { width: 48px; height: 45px; border-radius: 10px; font-size: 1.2rem; }
  .drop-zone[data-relation="left"], .drop-zone[data-relation="right"] { width: 82px; padding: 0 4px; font-size: .68rem; }
  .activity { min-height: 285px; }
  .token-tray { min-width: 190px; }
  .drag-token { min-width: 64px; min-height: 56px; font-size: 2.2rem; }
  .pos-left { left: 15%; }.pos-right { left: 85%; }.pos-outside { left: 84%; }
}

.scene-item.paintable.full-person-item .scene-emoji { width: 100%; height: 100%; }

/* Keep the rear target behind the reference object and reachable for drops. */
.place-board:has(.drop-zone[data-relation="behind"]) .place-anchor { pointer-events: none; }

.balance-symbol { display: block; width: 27px; height: 27px; flex-shrink: 0; }
@media (max-width: 600px) { .balance-symbol { width: 20px; height: 20px; } }

.pos-row-one { left: 14%; top: 52%; }
.pos-row-two { left: 38%; top: 52%; }
.pos-row-three { left: 62%; top: 52%; }
.pos-row-four { left: 86%; top: 52%; }
.scene-item.stem-flower-item { width: 72px; height: 108px; }
.stem-flower-item svg { display: block; width: 100%; height: 100%; }

.pair-child.boy > svg { display: block; width: 100%; height: 100%; }

.pair-child.girl > svg { display: block; width: 100%; height: 100%; }

.family-activity { width: min(760px, 100%); }
.family-note { margin: 0 0 12px; text-align: center; color: #5747a4; font-size: .92rem; }
.family-pictures { display: flex; justify-content: center; gap: 16px; }
.family-pictures .family-person-card { margin: 0; min-width: 0; width: min(100%, 280px); padding: 0; border: 4px solid transparent; border-radius: 20px; background: transparent; font: inherit; }
.family-pictures img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 18px; background: #fff8ed; }
.family-person-caption { display: block; padding: 8px 4px; color: #463b75; text-align: center; font-weight: 700; }
.family-pictures button.family-person-card { cursor: pointer; }
.family-pictures button.family-person-card:hover, .family-pictures button.family-person-card:focus-visible { border-color: #8171dd; outline: none; background: #f5f2ff; }
.family-pictures button.family-person-card.correct { border-color: #36a56c; background: #e0f8e9; }
.family-pictures button.family-person-card.wrong { border-color: #d33549; background: #ffe4e8; animation: shake .25s linear 2; }
.family-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.family-options button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 12px; border: 2px solid #cfc8ef; border-radius: 14px; background: white; color: #443595; font: inherit; font-weight: 700; }
.family-option-speaker { font-size: 1.1rem; }
.answer-hand { display: inline-block; flex: 0 0 auto; font-size: 1.65rem; line-height: 1; transform-origin: center; filter: drop-shadow(0 2px 1px #28334b25); }
.answer-hand-left { transform: scaleX(-1); }
.answer-hand-right { transform: none; }
.answer-hands { display: inline-flex; align-items: center; margin-right: 2px; }
.answer-hands .answer-hand + .answer-hand { margin-left: -6px; }
.answer-object-icon { display: inline-grid; min-width: 34px; place-items: center; font-size: 1.75rem; line-height: 1; }
.answer-flower-basket { display: inline-grid; flex: 0 0 auto; width: 54px; height: 50px; place-items: center; filter: drop-shadow(0 3px 2px #49301d25); }
.answer-flower-basket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.answer-person-icon { display: inline-block; flex: 0 0 auto; width: 36px; height: 44px; border: 1px solid #dccfbf; border-radius: 8px; background: #fff8ed; object-fit: contain; }
.answer-person-pair { display: inline-flex; align-items: center; }
.answer-person-pair .answer-person-icon + .answer-person-icon { margin-left: -8px; }
.family-options button:hover, .family-options button:focus-visible { outline: 3px solid #8171dd; }
.family-options button.speaking { border-color: #6c56dc; outline: 4px solid #b9aff5; background: #f3f0ff; }
.family-options button.correct { border-color: #36a56c; background: #e0f8e9; }
.family-options button.wrong { border-color: #d33549; background: #ffe4e8; }
@media (max-width: 600px) {
  .progress-labels { gap: 5px; }
  .difficulty-marker { padding: 3px 6px 3px 3px; font-size: .61rem; }
  .difficulty-marker svg { width: 52px; height: 40px; }
  .family-pictures { gap: 8px; }
  .family-pair .family-person-card { width: calc(50% - 4px); }
  .family-pictures img { max-height: 340px; }
  .family-person-caption { font-size: .82rem; }
  .family-options { gap: 6px; }
  .family-options button { padding: 9px 5px; font-size: .86rem; }
}