:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:#234b65;background:#e8c398;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible{outline:4px solid #2976a5;outline-offset:5px}button[hidden],[hidden]{display:none!important}button:disabled{cursor:default}button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.game{min-height:100svh;height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#e9c494 url('assets/classroom.webp') center top/cover no-repeat;padding:18px 3vw 17px;position:relative;isolation:isolate}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;flex:none;z-index:2;gap:14px}.title{text-align:center;position:relative;padding-bottom:19px}h1{margin:0;background:#fff8e9;border-radius:45px;padding:8px 37px 17px;font-size:clamp(30px,4.6vw,67px);line-height:1.1;font-weight:900;letter-spacing:-2px;box-shadow:0 3px 0 #d4bb8d30}.sound-tag{display:inline-block;background:#c6e9f6;border-radius:24px;padding:5px 22px;font-size:clamp(14px,1.7vw,25px);font-weight:800;position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap}.icon-button{display:grid;place-items:center;width:55px;height:55px;border:1px solid #fffcf2;background:#fff9edee;border-radius:50%;box-shadow:0 4px 10px #8c573d19;transition:transform .15s,background .15s}.icon-button:hover{background:#fff;transform:translateY(-2px)}.top-actions{display:flex;justify-content:flex-end;gap:12px}.sound-waves{display:none}#sound[aria-pressed=true] .sound-waves{display:block}#sound[aria-pressed=true] .sound-off{display:none}.sound-off{stroke-width:1.6}
.play-area{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;gap:clamp(12px,2vw,34px);padding:15px 0 17px}.card{width:min(44vw,calc(100svh - 225px),690px);aspect-ratio:1;position:relative;flex-shrink:0;border-radius:50%;background-color:#fffcef;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23977d50' opacity='.055' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");box-shadow:0 4px 0 #dbcaac,0 10px 17px #6c3c2340,inset 0 0 2px 2px #ffffffe0;transition:box-shadow .25s}.card.solved{box-shadow:0 4px 0 #b2c6a0,0 0 0 5px #b2ce9390,0 10px 17px #6c3c2330}
.item{position:absolute;left:var(--x);top:var(--y);width:36%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--angle));padding:0;border:0;border-radius:28%;background:transparent;mix-blend-mode:multiply;transition:filter .15s,scale .15s,opacity .15s;touch-action:manipulation}.item-art{display:block;width:140%;height:140%;margin:-20%;background-image:url('assets/objects.webp');background-size:400% 400%;background-repeat:no-repeat;pointer-events:none}.item:hover:not(:disabled){scale:1.06;z-index:2}.item-art{filter:url(#cutout);transition:filter .16s}.item:hover:not(:disabled) .item-art,.item:focus-visible .item-art{filter:url(#cutout) drop-shadow(0 0 2px #ffe18a) drop-shadow(0 0 5px #f3b537) drop-shadow(0 0 9px #ffdb7699)}.item:focus-visible{outline:none}.item:active:not(:disabled){scale:.97}.item.matched{filter:drop-shadow(0 0 7px #81b95b);scale:1.09;z-index:3}.solved .item:not(.matched){opacity:.38}.card[data-count="4"] .item{width:44%}.card[data-count="8"] .item{width:28%}.item.try-again{animation:wiggle .35s ease}.bottom-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center;flex:none;z-index:2}.instruction{font-weight:700;font-size:clamp(13px,1.55vw,22px);text-align:center;background:#fff5dfec;border-radius:22px;margin:0;padding:12px 25px;box-shadow:0 2px 8px #915c3210}.score{background:#fff5dfdf;border-radius:24px;padding:9px 16px;justify-self:start;display:flex;gap:9px;align-items:center;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}.score>span:first-child{color:#ce9746;font-size:24px}.text-button{display:flex;align-items:center;justify-self:end;gap:8px;border:0;background:#fff5dfdf;border-radius:24px;padding:10px 16px;font-size:14px;font-weight:700;white-space:nowrap}.text-button:hover{background:#fffcf2}.text-button svg{width:20px;height:20px}
.feedback{position:absolute;left:50%;top:50%;transform:translate(-50%,-45%) scale(.95);background:#fff9ebf5;backdrop-filter:blur(12px);border:2px solid #fff;border-radius:28px;box-shadow:0 12px 45px #70462a35;z-index:5;padding:20px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s}.feedback.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.feedback-check{background:#d8eac2;color:#4c703c;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:900}.feedback strong{font-size:35px}.feedback>span:not(.feedback-check){font-size:14px;color:#76816f}.next-button,.primary-button{border:0;border-radius:18px;background:#295d79;color:#fff;padding:13px 26px;font-weight:800;box-shadow:0 3px 0 #183e56;font-size:17px}.next-button{margin-top:9px}.next-button:hover,.primary-button:hover{background:#347292}
.loading{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff8ec;color:#2b526b}.loading-symbol{background:#c9e7f0;font-size:65px;font-weight:900;border-radius:30px;padding:12px 34px;animation:breathe 1.3s ease infinite}.loading p{font-size:19px}.loading button{padding:12px 20px;border:0;background:#295d79;color:white;border-radius:15px}
dialog{border:0;border-radius:30px;padding:28px;max-width:440px;width:calc(100% - 32px);color:#244b64;background:#fff9ee;box-shadow:0 20px 80px #30201150}dialog::backdrop{background:#302a2055;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}h2{font-size:29px;margin:0;letter-spacing:-.5px}.close{border:0;background:#eee8da;border-radius:50%;width:36px;height:36px;font-size:26px;line-height:1}.settings-intro{font-size:16px;line-height:1.6;color:#667b83;margin:18px 0 25px}fieldset{border:0;padding:0;margin:0}legend{font-weight:700;margin-bottom:12px}.choices{display:flex;gap:9px}.choices label{position:relative;flex:1}.choices input{position:absolute;opacity:0}.choices label span{display:flex;align-items:center;flex-direction:column;gap:5px;font-size:12px;background:#f2ecdf;border:2px solid transparent;border-radius:17px;padding:12px 4px;cursor:pointer}.choices strong{font-size:27px}.choices input:checked+span{border-color:#5890ab;background:#deeff4}.choices input:focus-visible+span{outline:3px solid #2976a5;outline-offset:3px}.adult-note{font-size:13px;line-height:1.6;color:#7b8177;margin:22px 0}.primary-button{width:100%}
@keyframes wiggle{0%,100%{translate:0}30%{translate:-5px}70%{translate:5px}}@keyframes breathe{50%{scale:.95;opacity:.8}}
@media(min-width:1500px){.game{padding-top:23px}.card{width:min(44vw,calc(100svh - 235px),800px)}}
@media(max-width:700px){.game{padding:14px 13px}.topbar{gap:8px}.icon-button{width:43px;height:43px}.icon-button svg{width:23px;height:23px}.top-actions{gap:7px}.fullscreen-button{display:none}h1{font-size:clamp(28px,6vw,39px);padding:10px 19px 16px;letter-spacing:-1px}.sound-tag{font-size:15px;padding:4px 14px}.bottom-bar{gap:8px;grid-template-columns:auto 1fr auto}.instruction{font-size:13px;padding:10px 12px;border-radius:16px}.text-button{padding:10px}.text-button span{display:none}.score{font-size:16px;padding:7px 10px;gap:5px}.score>span:first-child{font-size:20px}.feedback{padding:17px 22px}.feedback strong{font-size:29px}}
@media(max-aspect-ratio:4/5){.play-area{flex-direction:column;gap:18px;padding:16px 0}.card{width:min(81vw,calc((100svh - 210px)/2));max-width:470px}.game{background-position:36% top}.bottom-bar{grid-template-columns:auto 1fr auto}.instruction{max-width:280px;justify-self:center}.feedback{top:51%}}
@media(max-height:540px) and (min-aspect-ratio:4/5){.game{padding:8px 18px}.title{padding-bottom:14px}h1{font-size:27px;padding:5px 22px 10px;letter-spacing:-.7px}.sound-tag{font-size:12px;padding:3px 15px}.icon-button{width:38px;height:38px}.icon-button svg{width:20px;height:20px}.play-area{padding:8px 0 11px;gap:30px}.card{width:min(39vw,calc(100svh - 135px))}.instruction{padding:7px 17px;font-size:13px}.score{padding:5px 12px;font-size:15px}.score>span:first-child{font-size:18px}.text-button{padding:6px 12px;font-size:12px}.feedback{padding:12px 25px}.feedback strong{font-size:27px}.feedback-check{width:26px;height:26px}.next-button{padding:9px 20px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Start, sound-position selection, and word gallery. */
.topbar>.title{grid-column:2;grid-row:1}.topbar>#back{grid-column:1;grid-row:1}.topbar>.top-actions{grid-column:3;grid-row:1}
.game[data-screen="home"]{background-image:url('assets/title.webp');background-position:center center}
.home-screen{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;padding:8px 0 0}
.home-subtitle{font-weight:700;font-size:clamp(14px,1.6vw,22px);background:#fff7e6ed;padding:8px 22px;border-radius:20px;margin:0;text-align:center;box-shadow:0 3px 10px #744d2810}
.home-actions{display:flex;align-items:center;flex-direction:column;gap:9px}.play-button{width:auto;min-width:210px;font-size:27px;border-radius:24px;padding:14px 32px;display:flex;justify-content:center;gap:32px;align-items:center;background:#285e79;box-shadow:0 5px 0 #194058,0 8px 20px #71411e25}.play-button:hover{transform:translateY(-1px)}
.gallery-link{border:0;background:#fff5dfed;border-radius:18px;color:#34576b;padding:8px 18px;font-size:14px;text-decoration:underline;text-underline-offset:3px}.gallery-link:hover{background:#fffdf5}
.selection-screen{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:auto;padding:15px 4px}.selection-heading{text-align:center}.selection-heading h2{font-size:clamp(23px,3vw,35px);background:#fff6e6f2;border-radius:22px;padding:12px 27px;outline:none}.selection-heading p{margin:8px 0 0;font-size:17px;color:#294a60;font-weight:600}
.position-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(880px,100%)}
.position-option{position:relative;border:2px solid #fffdf2;background:#fff8eaf5;border-radius:27px;padding:15px 15px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 4px 0 #d3b792,0 8px 20px #78431f13;transition:transform .16s,box-shadow .16s}.position-option:hover{transform:translateY(-4px);box-shadow:0 5px 0 #c1ac85,0 12px 22px #78431f22}.position-art{display:block;width:115px;height:115px;position:relative;mix-blend-mode:multiply}.position-art .item-art,.gallery-art .item-art{position:absolute;left:0;top:0}.position-pattern{font-size:19px;font-weight:800;color:#b4b5a7;letter-spacing:6px;background:#eee8db;border-radius:14px;padding:4px 10px}.position-pattern b{color:#285e79}.position-option strong{font-size:24px;line-height:1.3}.position-option small{font-size:13px;color:#758084;line-height:1.4;text-align:center}.position-total{font-size:12px;color:#59736e;margin-top:3px}
.all-words{display:flex;align-items:center;justify-content:center;gap:20px;border:2px solid #fff9ef;background:#d7eaf0f5;border-radius:22px;padding:15px 25px;max-width:880px;width:100%;box-shadow:0 3px 0 #b1c9cb;color:#28556d}.all-words strong{font-size:19px}.all-words>span:first-child{font-size:25px;color:#538793}.all-words small{font-size:14px;color:#627c86}.all-words>span:last-child{margin-left:auto;font-size:24px}.all-words:hover{background:#e2f3f6}.selection-screen>.gallery-link{flex-shrink:0}
.item-art[data-atlas="extra"]{background-image:url('assets/objects-extra.webp');width:110%;height:110%;margin:-5%}
.gallery-dialog{width:min(880px,calc(100% - 28px));max-width:880px;max-height:88svh;padding:25px 28px;overscroll-behavior:contain}.gallery-dialog>.dialog-heading{position:sticky;top:-25px;background:#fff9ee;z-index:2;padding:12px 0;box-shadow:0 8px 9px #fff9ee}.gallery-intro{color:#7b8177;margin:6px 0 25px;font-size:14px}.gallery-dialog h3{font-size:21px;margin:27px 0 14px}.word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.word-grid figure{margin:0;text-align:center;min-width:0;border-radius:19px;background:#f6efdf;padding:8px 6px 11px;overflow:hidden}.gallery-art{display:block;position:relative;width:100%;aspect-ratio:1;mix-blend-mode:multiply}.word-grid figcaption{position:relative;font-size:14px;font-weight:700;line-height:1.2;margin-top:3px}.gallery-note{font-size:14px;line-height:1.5;color:#78827c}.choices input:disabled+span{opacity:.3;cursor:default}
@media(max-width:700px){.top-actions{gap:6px}.topbar>.title h1{font-size:clamp(24px,5.5vw,38px);padding:10px 14px 16px}.game[data-screen="play"] .top-actions .icon-button{width:37px;height:37px}.game[data-screen="play"] .top-actions svg{width:20px;height:20px}.game[data-screen="play"] .sound-tag{font-size:12px;padding:4px 10px}.selection-screen{gap:12px;padding:12px 2px}.selection-heading h2{font-size:23px;padding:10px 16px}.selection-heading p{font-size:14px;margin-top:5px}.position-options{gap:10px;grid-template-columns:1fr;max-width:460px}.position-option{display:grid;grid-template-columns:80px 1fr auto;grid-template-rows:auto auto;padding:9px 14px;gap:2px 10px;border-radius:22px;min-height:100px;text-align:left}.position-art{grid-row:1/3;grid-column:1;width:80px;height:80px}.position-pattern{grid-column:3;grid-row:1/3;font-size:15px;letter-spacing:3px;padding:5px 7px}.position-option strong{grid-column:2;grid-row:1;align-self:end;font-size:21px}.position-option small{grid-column:2;grid-row:2;align-self:start;text-align:left;font-size:11px}.position-total{display:none}.all-words{max-width:460px;padding:12px 16px;gap:9px;border-radius:20px}.all-words strong{font-size:15px}.all-words small{font-size:11px}.all-words>span:first-child{font-size:20px}.gallery-link{font-size:13px;padding:7px 14px}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gallery-dialog{padding:17px}.gallery-dialog>.dialog-heading{top:-17px}.word-grid figcaption{font-size:12px}.gallery-dialog h3{font-size:19px}}
@media(max-aspect-ratio:4/5){.game[data-screen="home"]{background-image:url('assets/classroom.webp')}.home-screen::before{content:"";position:absolute;inset:15% -15px 20%;background:url('assets/title.webp') center/contain no-repeat;z-index:-1}.home-subtitle{font-size:14px;padding:8px 14px;margin-top:15px;max-width:290px}.home-actions{margin-bottom:8vh}.play-button{font-size:25px;min-width:220px}.game[data-screen="home"] .title h1{font-size:35px}}
@media(max-height:540px) and (min-aspect-ratio:4/5){.home-subtitle{font-size:13px;padding:5px 16px}.home-screen{padding:0}.home-actions{gap:7px}.play-button{font-size:19px;min-width:170px;padding:9px 25px}.home-actions .gallery-link{font-size:11px;padding:5px 12px}.selection-screen{justify-content:flex-start;gap:10px}.selection-heading h2{font-size:20px;padding:8px 20px}.selection-heading p{font-size:12px;margin:4px 0}.position-option{padding:8px 12px;gap:3px;border-radius:20px}.position-art{width:70px;height:70px}.position-option strong{font-size:18px}.position-pattern{font-size:13px;padding:2px 7px}.position-option small{font-size:10px}.position-total{font-size:10px}.all-words{padding:8px 16px}.all-words strong{font-size:15px}.selection-screen>.gallery-link{font-size:11px}.position-options{gap:12px}.topbar>.title h1{font-size:27px;padding:5px 22px 10px}}
.game[data-screen="home"]{background-image:url('assets/classroom.webp');background-position:center top}
.home-screen::before{content:"";position:absolute;inset:0 -3vw;background:url('assets/title.webp') center/contain no-repeat;mask-image:linear-gradient(transparent 0%,#000 24%,#000 86%,transparent 100%);z-index:-1}
@media(max-aspect-ratio:4/5){.home-screen::before{inset:8% -15px 14%}.home-actions{margin-bottom:7vh}}
.home-screen::before{inset:auto -3vw;top:50%;aspect-ratio:16/9;transform:translateY(-50%);mask-image:linear-gradient(transparent 0%,#000 24%,#000 89%,transparent 100%)}
@media(max-aspect-ratio:4/5){.home-screen::before{inset:auto -15px;top:43%}}
.home-screen::before{mask-image:linear-gradient(transparent 0% 20%,#000 28%,#000 91%,transparent 100%)}
/* Each illustration stays within its own measured, non-overlapping space. */
.item,.card[data-count="4"] .item,.card[data-count="8"] .item{width:var(--size);transform:translate(-50%,-50%);border-radius:12%;mix-blend-mode:normal;overflow:hidden;isolation:isolate}
.item-art,.item-art[data-atlas="extra"]{width:100%;height:100%;margin:0;transform:scale(.86);transform-origin:center;filter:url(#cutout)}
.item .item-art{transform:rotate(var(--angle)) scale(.86)}
.item:hover:not(:disabled){scale:1.03}.item.matched{scale:1.03}
.item-art[data-atlas="extra"]{background-image:url('assets/objects-extra.webp')}
.position-art .item-art,.gallery-art .item-art{transform:scale(.86)}
/* The count is a visible choice before the position, not a hidden restriction. */
.menu-count{width:min(520px,100%);background:#fff7e9ee;border-radius:22px;padding:10px 18px 13px;flex-shrink:0}.menu-count legend{float:left;width:100%;text-align:center;font-size:16px;margin:0 0 8px}.menu-count .choices{clear:both;gap:12px}.menu-count .choices label span{flex-direction:row;justify-content:center;gap:10px;padding:7px 12px;font-size:12px;border-radius:15px}.menu-count .choices strong{font-size:25px}.selection-screen{justify-content:safe center;gap:12px}.selection-screen>.position-options,.selection-screen>.selection-heading,.selection-screen>.all-words{flex-shrink:0}.position-art .item-art{background-repeat:no-repeat}
@media(max-width:700px){.menu-count{padding:9px 12px 11px}.menu-count legend{font-size:14px;margin-bottom:6px}.menu-count .choices{gap:7px}.menu-count .choices label span{gap:6px;font-size:10px;padding:5px}.menu-count .choices strong{font-size:23px}.selection-screen{gap:10px}.selection-heading h2{font-size:21px}.selection-heading p{display:none}.position-option{min-height:89px;grid-template-columns:70px 1fr auto;padding:7px 12px}.position-art{width:70px;height:70px}}
@media(max-height:540px) and (min-aspect-ratio:4/5){.selection-screen{justify-content:flex-start}.menu-count{max-width:480px;padding:6px 12px}.menu-count legend{font-size:12px;margin-bottom:4px}.menu-count .choices label span{padding:3px 8px}.menu-count .choices strong{font-size:18px}}
.gallery-search-label{display:block;font-size:13px;font-weight:700;color:#5a737b;margin:0 0 20px}.gallery-search-label input{display:block;width:100%;margin-top:7px;border:2px solid #d7e4df;border-radius:15px;background:#fffdf5;padding:11px 14px;color:#244b64;font:inherit;font-size:16px}.gallery-search-label input:focus{outline:3px solid #8dbfce;outline-offset:2px}

/* звонок: кнопки урока логопеда стоят сверху справа — шапка игры встаёт под ними */
body.pult-est .game{padding-top:92px}