:root { font-family: Arial, sans-serif; color: #182341; background: #f5f8ff; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
.size-app { width: min(1080px, calc(100% - 28px)); margin: 0 auto 36px; }
.size-header { padding: 26px 0 16px; }
.back-link { color: #4234b2; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.back-link.blocked-link { cursor: default; opacity: .62; }
.back-link.blocked-link:hover { text-decoration: none; }
.eyebrow { margin-top: 24px; color: #6555b3; font-size: .8rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 9px 0; color: #4734c5; font-size: clamp(1.8rem, 4vw, 3rem); }
.size-header p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.quiz-panel { background: white; border: 1px solid #e0e6f4; border-radius: 25px; box-shadow: 0 14px 35px #233a6512; padding: clamp(17px, 3vw, 32px); }
.question-navigation { margin: 0 0 22px; padding: 14px; border-radius: 18px; background: #f4f2ff; border: 1px solid #ded9ff; }
.question-navigation-title { margin: 0 0 10px; color: #493bb7; font-size: .9rem; font-weight: 800; }
.question-numbers { display: grid; grid-template-columns: repeat(20, minmax(28px, 1fr)); gap: 6px; }
.question-jump { min-width: 28px; min-height: 30px; padding: 4px 2px; border: 1px solid #c9c3ef; border-radius: 8px; background: white; color: #4b419e; font-size: .78rem; font-weight: 800; }
.question-jump:hover { border-color: #6758d2; background: #eae7ff; }
.question-jump.current { border-color: #5143c9; background: #5749ce; color: white; box-shadow: 0 0 0 2px #c9c3ff; }
.question-jump.solved:not(.current) { border-color: #57ad7d; background: #ddf7e8; color: #176c43; }
.start-row { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0 22px; }
.start-row[hidden] { display: none; }
.quiz-mode-picker { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 440px); padding: 5px; border: 1px solid #d4d0ef; border-radius: 14px; background: #f3f1ff; }
.quiz-mode-button { border: 0; border-radius: 10px; padding: 11px 15px; background: transparent; color: #5147a4; font-weight: 900; }
.quiz-mode-button.active { background: white; color: #3529ad; box-shadow: 0 3px 10px #392b861f; }
.start-quiz-button { min-width: 220px; border: 0; border-radius: 14px; padding: 15px 24px; background: #5749ce; color: white; font-size: 1.08rem; font-weight: 900; box-shadow: 0 8px 18px #33258f2e; }
.start-quiz-button:hover { background: #4639bd; transform: translateY(-2px); }
.progress-row, .nav-row, .help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-row { font-weight: 800; color: #5243c2; }
.type-pill { border-radius: 100px; padding: 8px 12px; background: #e9f5ff; color: #09629b; font-size: .83rem; }
.progress-track { height: 9px; border-radius: 20px; background: #e9edfb; margin: 15px 0 27px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #4c60d8, #4eb9a1); transition: width .25s; }
h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2.2rem); margin: 0 0 15px; }
#prompt { scroll-margin-top: 14px; }
.help-row { justify-content: center; min-height: 48px; margin-bottom: 17px; }
.audio-button { border: 0; border-radius: 24px; background: #e9ebff; color: #332ba4; font-weight: 700; padding: 10px 18px; }
.audio-button:hover { background: #d9dcff; }
.audio-status { font-size: .85rem; color: #68748f; }
.drag-tray { margin: 0 auto 20px; padding: 10px 17px; width: fit-content; min-width: 180px; text-align: center; border: 2px dashed #7c68dc; border-radius: 18px; background: #f7f3ff; }
.drag-tray p { margin: 0 0 7px; color: #614ca6; font-weight: 700; font-size: .85rem; }
.drag-token { border: 2px solid #6654cd; border-radius: 14px; background: white; min-width: 78px; min-height: 72px; font-size: 2.7rem; touch-action: none; user-select: none; cursor: grab; box-shadow: 0 5px 12px #37296d19; }
.drag-token:active { cursor: grabbing; }
.drag-token.is-picked { outline: 4px solid #9a8df5; }
.choices { display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); gap: 14px; }
.choice { position: relative; min-width: 0; min-height: 244px; padding: 15px; border: 3px solid #dae4f4; border-radius: 20px; background: #faffff; transition: border-color .16s, transform .16s, background .16s; }
.choice.selectable { cursor: pointer; }
.choice.selectable:hover { transform: translateY(-3px); border-color: #8979e8; }
.choices.order-layout { align-items: stretch; }
.order-choice { min-height: 230px; touch-action: none; cursor: grab; }
.order-choice:active { cursor: grabbing; }
.order-choice.order-dragging { opacity: .45; }
.order-choice.order-drop-target { border-color: #6556d8; background: #f0edff; box-shadow: 0 0 0 4px #d9d3ff; }
.order-drag-ghost { position: fixed; z-index: 1200; pointer-events: none; font-size: 76px; line-height: 1; filter: drop-shadow(0 8px 6px #1720374a); }
.order-position { position: absolute; top: 10px; left: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #5749ce; color: white; font-weight: 900; }
.order-emoji { transform-origin: center; }
.choice.correct { border-color: #38a671; background: #e8fbef; }
.choice.wrong, .choice.selectable.wrong:hover { border-color: #d22c42; background: #ffe5e8; box-shadow: inset 0 0 0 3px #ffd0d6; }
.choice.wrong::after { content: "✕"; position: absolute; top: 7px; right: 9px; color: #bd2035; font-size: 1.35rem; font-weight: 900; }
.choice-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 194px; overflow: hidden; border-radius: 13px; background-color: white; }
.choice-art.has-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.choice-art.height-comparison { align-items: flex-end; padding-bottom: 20px; }
.choice-art.height-comparison .choice-emoji { transform-origin: center bottom; }
.choice-emoji { display: block; font-size: 78px; line-height: 1; transform-origin: center; filter: drop-shadow(0 8px 3px #2530461a); }
.choice-rope { display: block; width: 76%; max-width: 230px; height: 25px; border: 2px solid #78451f; border-radius: 30px; background: repeating-linear-gradient(125deg, #b8783f 0 10px, #f2c679 10px 20px, #a56332 20px 25px); box-shadow: 0 6px 7px #5c391d33; transform-origin: center; }
.choice-child { display: block; width: 100px; height: 180px; flex: none; }
.choice-child svg { display: block; width: 100%; height: 100%; }
.comparison-figure { display: flex; align-items: center; justify-content: center; flex: none; transform-origin: center; }
.comparison-pencil { width: 170px; filter: drop-shadow(0 7px 4px #25304626); }
.comparison-pencil.pencil-thin { height: 11px; }
.comparison-pencil.pencil-medium { height: 34px; }
.comparison-pencil.pencil-thick { height: 66px; }
.comparison-pencil svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-bottle { height: 174px; filter: drop-shadow(0 7px 4px #25304626); }
.comparison-bottle.bottle-narrow { width: 40px; min-width: 40px; max-width: 40px; }
.comparison-bottle.bottle-medium { width: 86px; min-width: 86px; max-width: 86px; }
.comparison-bottle.bottle-wide { width: 146px; min-width: 146px; max-width: 146px; }
.comparison-bottle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-hat { height: 86px; filter: drop-shadow(0 7px 4px #25304626); }
.comparison-hat.hat-narrow { width: 72px; }
.comparison-hat.hat-medium { width: 116px; }
.comparison-hat.hat-wide { width: 174px; }
.comparison-hat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-flower { width: 112px; height: 184px; transform-origin: center bottom; filter: drop-shadow(0 7px 4px #25304620); }
.comparison-flower.flower-small { transform: scale(.52); }
.comparison-flower.flower-medium { transform: scale(.78); }
.comparison-flower.flower-large { transform: scale(1); }
.comparison-flower svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-giraffe { width: 112px; transform-origin: center bottom; }
.comparison-giraffe.figure-small { height: 86px; }
.comparison-giraffe.figure-medium { height: 128px; }
.comparison-giraffe.figure-large { height: 176px; }
.comparison-giraffe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-caterpillar { width: 155px; height: 70px; gap: 0; transform: scaleX(var(--figure-scale)); }
.comparison-caterpillar > span { position: relative; width: 38px; height: 38px; margin-left: -7px; border: 4px solid #263015; border-radius: 50%; background: #95cf22; box-shadow: inset 0 -6px 0 #72ad13; }
.comparison-caterpillar > span:nth-child(even) { margin-top: 15px; background: #b3dc2b; }
.comparison-caterpillar .caterpillar-head { width: 45px; height: 45px; margin-top: -5px; background: #b7dd27; }
.caterpillar-head::before, .caterpillar-head::after { content: ""; position: absolute; top: -17px; width: 4px; height: 20px; border-radius: 4px; background: #263015; transform-origin: bottom; }
.caterpillar-head::before { left: 9px; transform: rotate(-27deg); }
.caterpillar-head::after { right: 9px; transform: rotate(27deg); }
.caterpillar-head i, .caterpillar-head b { position: absolute; top: 12px; width: 5px; height: 7px; border-radius: 50%; background: #172037; }
.caterpillar-head i { left: 10px; }
.caterpillar-head b { right: 10px; }
.comparison-key { width: 155px; height: 76px; transform: scaleX(var(--figure-scale)); }
.comparison-key svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comparison-train { width: 172px; height: 84px; transform: scaleX(var(--figure-scale)); transform-origin: center; }
.comparison-train svg { display: block; width: 100%; height: 100%; overflow: visible; }
.choice-label { display: block; margin: 0 auto; text-align: center; color: #6d7590; font-size: .85rem; font-weight: 700; }
.choice.drag-choice { min-height: 300px; padding: 42px 35px; }
.choice.drag-choice .choice-art { height: 210px; }
.drop-zone { position: absolute; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 2px dashed #7770be; border-radius: 13px; background: #f1efffe8; color: #4f45a4; font-weight: 800; font-size: 1.3rem; z-index: 2; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-hovered { background: #ddd7ff; border-style: solid; }
.drop-zone.wrong { background: #ffe1e1; border-color: #d93d4b; color: #a72736; }
.drop-zone.top { top: 3px; left: calc(50% - 22px); }
.drop-zone.bottom { bottom: 3px; left: calc(50% - 22px); }
.drop-zone.left { left: 3px; top: calc(50% - 22px); }
.drop-zone.right { right: 3px; top: calc(50% - 22px); }
.drop-zone.filled { background: #dff7e9; border-color: #39a16c; }
.drag-ghost { position: fixed; z-index: 1000; pointer-events: none; font-size: 3rem; transform: translate(-50%, -50%); filter: drop-shadow(0 5px 5px #0004); }
.feedback { min-height: 28px; text-align: center; font-size: 1.1rem; font-weight: 700; margin: 20px 0 15px; }
.feedback.success { color: #17734a; }
.feedback.error { color: #b03a45; }
.nav-row { justify-content: center; }
.nav-row button { border: 0; border-radius: 13px; padding: 12px 19px; background: #5649cd; color: white; font-weight: 800; }
.nav-row button:disabled { opacity: .45; cursor: default; }
.footnote { color: #64708c; font-size: .88rem; line-height: 1.45; text-align: center; }
.finish-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: #172037a8; backdrop-filter: blur(4px); }
.finish-overlay[hidden] { display: none; }
.finish-celebration { position: relative; width: min(520px, 100%); overflow: hidden; border: 5px solid #ffc53d; border-radius: 20px; padding: 38px 24px 30px; text-align: center; background: white; box-shadow: 0 24px 70px #11182d70; animation: finish-pop .55s cubic-bezier(.18,.9,.25,1.25); }
.finish-icon { width: 96px; height: 96px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #ffc53d; color: #fff; font-size: 64px; line-height: 1; text-shadow: 0 3px 0 #d18d00; animation: finish-star 1s ease-in-out infinite alternate; }
.finish-celebration h2 { margin: 0; color: #3e31bd; font-size: 3rem; }
.finish-celebration p { margin: 8px 0 24px; color: #24304c; font-size: 1.25rem; font-weight: 800; }
.finish-celebration button { border: 0; border-radius: 14px; padding: 13px 22px; background: #5749ce; color: white; font-weight: 900; }
.finish-confetti, .finish-confetti::before, .finish-confetti::after { position: absolute; inset: -30px; pointer-events: none; content: ""; background-image: radial-gradient(circle, #ff4f78 0 5px, transparent 6px), radial-gradient(circle, #37b987 0 5px, transparent 6px), radial-gradient(circle, #4f7cff 0 5px, transparent 6px), radial-gradient(circle, #ffc53d 0 5px, transparent 6px); background-size: 84px 92px, 103px 88px, 91px 109px, 117px 96px; background-position: 0 0, 25px 30px, 54px 12px, 12px 63px; animation: confetti-fall 2.4s linear infinite; }
.finish-confetti::before { transform: rotate(17deg); animation-delay: -.8s; }
.finish-confetti::after { transform: rotate(-13deg); animation-delay: -1.6s; }
@keyframes finish-pop { from { opacity: 0; transform: scale(.65) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes finish-star { from { transform: rotate(-8deg) scale(.94); } to { transform: rotate(8deg) scale(1.08); } }
@keyframes confetti-fall { from { background-position-y: -120px, -80px, -160px, -100px; } to { background-position-y: 180px, 220px, 140px, 200px; } }
@media (max-width: 640px) {
  .size-app { width: min(100% - 16px, 540px); }
  .quiz-panel { border-radius: 16px; }
  .choices { gap: 5px; }
  .choice { min-height: 157px; padding: 5px; border-width: 2px; border-radius: 11px; }
  .choice-art { height: 125px; }
  .choice-art.giraffe-comparison { height: 148px; }
  .choice-emoji { font-size: 42px; }
  .choice-child { width: 66px; height: 119px; }
  .comparison-pencil { width: 82px; }
  .comparison-pencil.pencil-thin { height: 7px; }
  .comparison-pencil.pencil-medium { height: 23px; }
  .comparison-pencil.pencil-thick { height: 50px; }
  .comparison-bottle { height: 112px; }
  .comparison-bottle.bottle-narrow { width: 25px; min-width: 25px; max-width: 25px; }
  .comparison-bottle.bottle-medium { width: 56px; min-width: 56px; max-width: 56px; }
  .comparison-bottle.bottle-wide { width: 92px; min-width: 92px; max-width: 92px; }
  .comparison-hat { height: 58px; }
  .comparison-hat.hat-narrow { width: 40px; }
  .comparison-hat.hat-medium { width: 64px; }
  .comparison-hat.hat-wide { width: 92px; }
  .comparison-flower { width: 70px; height: 116px; }
  .comparison-giraffe { width: 72px; }
  .comparison-giraffe.figure-small { height: 54px; }
  .comparison-giraffe.figure-medium { height: 81px; }
  .comparison-giraffe.figure-large { height: 112px; }
  .comparison-caterpillar { width: 78px; height: 48px; }
  .comparison-caterpillar.caterpillar-short { transform: scaleX(.48); }
  .comparison-caterpillar.caterpillar-medium { transform: rotate(-24deg) scaleX(.78); }
  .comparison-caterpillar.caterpillar-long { transform: rotate(-90deg) scaleX(1.12); }
  .comparison-caterpillar > span { width: 25px; height: 25px; border-width: 3px; }
  .comparison-caterpillar .caterpillar-head { width: 29px; height: 29px; }
  .comparison-key { width: 125px; height: 48px; }
  .comparison-key.key-short { transform: scaleX(.48); }
  .comparison-key.key-medium { transform: rotate(-25deg) scaleX(.78); }
  .comparison-key.key-long { transform: rotate(-90deg) scaleX(.92); }
  .comparison-train { width: 92px; height: 54px; }
  .choice.drag-choice { padding: 35px 7px; min-height: 210px; }
  .choice.drag-choice .choice-art { height: 140px; }
  .choices.drag-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .order-choice { min-height: 158px; }
  .order-position { top: 6px; left: 7px; width: 26px; height: 26px; font-size: .8rem; }
  .order-drag-ghost { font-size: 54px; }
  .choices.drag-layout .choice.drag-choice { padding: 29px 18px; min-height: 210px; }
  .choices.drag-layout .choice.drag-choice .choice-art { height: 138px; }
  .choices.drag-layout .choice.drag-choice .choice-art.giraffe-comparison { height: 154px; }
  .choices.drag-layout .choice-emoji { font-size: 43px; }
  .choices.drag-layout .comparison-giraffe { width: 62px; }
  .choices.drag-layout .comparison-giraffe.figure-large { height: 108px; }
  .choices.drag-layout .comparison-caterpillar { width: 74px; }
  .choices.drag-layout .comparison-caterpillar.caterpillar-long { transform: rotate(-90deg) scaleX(1.08); }
  .choices.drag-layout .comparison-key { width: 82px; }
  .choices.drag-layout .comparison-key.key-long { transform: rotate(-90deg) scaleX(1); }
  .choices.drag-layout .comparison-train { width: 72px; }
  .drop-zone { width: 27px; height: 27px; border-width: 1px; font-size: .8rem; border-radius: 7px; }
  .drop-zone.top { top: 2px; left: calc(50% - 14px); }
  .drop-zone.bottom { bottom: 2px; left: calc(50% - 14px); }
  .drop-zone.left { left: 2px; top: calc(50% - 14px); }
  .drop-zone.right { right: 2px; top: calc(50% - 14px); }
  .drop-zone.top, .drop-zone.bottom { left: calc(50% - 14px); }
  .drop-zone.left, .drop-zone.right { top: calc(50% - 14px); }
  .progress-row { font-size: .8rem; }
  .question-navigation { padding: 10px; }
  .question-numbers { grid-template-columns: repeat(8, minmax(25px, 1fr)); gap: 5px; }
  .question-jump { min-width: 25px; min-height: 28px; font-size: .72rem; }
  .audio-status { max-width: 120px; }
  .start-quiz-button { width: 100%; min-width: 0; }
  .finish-celebration h2 { font-size: 2.35rem; }
  .finish-celebration p { font-size: 1.05rem; }
}