:root{--paper:#faf9f5;--surface:#fffdf8;--ink:#2e3d31;--muted:#687365;--green:#40664f;--green-dark:#31543e;--soft-green:#edf2e9;--line:#e0e5d9;--gold:#e5ae57;--font:'Avenir Next','Nunito','Segoe UI',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;transition:background .18s,transform .18s,box-shadow .18s}button:disabled{cursor:default}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #ae7630;outline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;top:12px;left:16px;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);z-index:100;background:var(--green);color:white;border-radius:12px}.skip-link:focus{width:48px;height:48px;padding:12px;clip-path:none}
.picture-toolbar{max-width:1280px;margin:auto;padding:15px 48px 8px;min-height:114px;display:flex;align-items:center;justify-content:space-between;gap:24px}.toolbar-mascot{width:150px;height:100px;object-fit:contain;mask-image:radial-gradient(ellipse 75% 78% at 50% 50%,#000 65%,transparent 100%)}.toolbar-controls{display:flex;align-items:center;gap:14px}.menu-wrap{position:relative}.menu-toggle{height:66px;min-width:94px;display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid #d9e0d2;border-radius:17px;background:#fffefa;box-shadow:0 2px 5px #384c3506}.menu-toggle:hover,.menu-toggle[aria-expanded=true]{background:var(--soft-green);border-color:#94aa88}.menu-toggle>svg{width:17px;height:17px;color:#6f8064}.menu-toggle>.sprite{width:47px;height:47px;border-radius:8px;mix-blend-mode:multiply}.difficulty-dots{width:41px;display:grid;grid-template-columns:repeat(3,9px);justify-content:center;gap:5px}.difficulty-dots span{height:9px;width:9px;border-radius:3px;background:#78906d}.icon-button,.round-button{display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;width:50px;height:50px;color:var(--muted)}.icon-button:hover,.round-button:not(:disabled):hover{background:var(--soft-green);color:var(--green-dark);transform:translateY(-2px)}
.chooser-panel{position:absolute;right:0;top:calc(100% + 14px);width:360px;max-width:calc(100vw - 32px);background:#fffefa;border:1px solid #dce3d3;border-radius:20px;padding:24px;box-shadow:0 15px 48px #293c2e25;z-index:50;max-height:calc(100svh - 145px);overflow-y:auto;overscroll-behavior:contain;animation:rise-in .2s both}.chooser-panel[hidden]{display:none}.chooser-panel h2{font-size:22px;letter-spacing:-.5px;margin:0 0 17px}.chooser-panel p{font-size:14px;color:var(--muted);margin:0 0 18px}.story-menu{width:510px}.story-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.story-option{display:flex;align-items:center;gap:10px;text-align:left;padding:9px;border:1px solid #e2e6db;border-radius:11px;background:var(--paper);font-size:14px;font-weight:600;line-height:1.35;min-height:66px}.story-option.active{border-color:#78947a;background:var(--soft-green);color:var(--green-dark)}.story-option:hover{background:#e9ede3}.story-thumb{width:47px;height:47px;flex-shrink:0;border-radius:6px;mix-blend-mode:multiply}.menu-instructions{margin-top:20px!important;padding-top:18px;border-top:1px solid var(--line)}.menu-legend{display:flex;flex-wrap:wrap;gap:13px;font-size:12px;color:var(--muted)}.menu-legend>span{display:flex;align-items:center;gap:4px}.menu-legend svg{width:17px;height:17px}#menu-status:empty{display:none}#menu-status:not(:empty){color:#a84f38;margin:14px 0}.difficulty-options{display:flex;flex-direction:column;gap:6px}.difficulty-options button{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;gap:14px;border-radius:10px;background:var(--paper);border:1px solid transparent;text-align:left}.difficulty-options button strong{font-size:16px}.difficulty-options button span{font-size:14px;color:var(--muted)}.difficulty-options button.active{background:var(--soft-green);border-color:#78947a}.difficulty-options button:hover{background:#e9ede3}
main{max-width:1280px;padding:20px 48px 40px;margin:auto}.play-area{position:relative;padding:14px 0 0;min-height:470px;scroll-margin-top:10px}.play-area:focus{outline:none}.sprite{background-image:var(--atlas);background-size:calc(var(--columns,4)*100%) 200%;background-position:var(--x) var(--y);background-repeat:no-repeat}.picture-grid{--card-size:198px;--gap:22px;display:grid;grid-template-columns:repeat(var(--count,4),minmax(0,var(--card-size)));gap:var(--gap);justify-content:center}.play-area[data-count='5'] .picture-grid{--card-size:174px;--gap:20px}.play-area[data-count='6'] .picture-grid{--card-size:152px;--gap:18px}.play-area[data-count='7'] .picture-grid{--card-size:135px;--gap:16px}.play-area[data-count='8'] .picture-grid{--card-size:120px;--gap:15px}.picture-card{position:relative;background:var(--surface);padding:0;border:1px solid #e2e4d8;border-radius:15px;box-shadow:0 4px 10px #3e4d3010;aspect-ratio:1;user-select:none;touch-action:none;overflow:hidden;animation:rise-in .3s both;animation-delay:calc(var(--index,0)*30ms)}.picture-card .sprite{display:block;width:100%;height:100%;border-radius:14px;pointer-events:none}.picture-card:hover{transform:translateY(-5px);border-color:#a7b69b;box-shadow:0 9px 18px #3e4d3018}.picture-card.selected{border:2px solid var(--green);transform:translateY(-5px);box-shadow:0 0 0 4px #cbd9c84f,0 8px 16px #3e4d3018}.card-grip{position:absolute;top:10px;right:9px;color:#8d9685;opacity:.6;pointer-events:none}.card-grip svg{width:17px;height:17px}.selected .card-grip{color:var(--green);opacity:1}.bank-empty{border:1px dashed #e2e6da;background:transparent;border-radius:15px;aspect-ratio:1;display:grid;place-items:center;color:#aab9a1;padding:0}.bank-empty svg{width:28px;height:28px}.bank-empty:hover{background:var(--soft-green)}.flow-cue{display:flex;justify-content:center;align-items:center;height:78px;color:#a4b395}.flow-cue svg{width:26px;height:26px;stroke-width:1.3}.sequence-slot{position:relative;aspect-ratio:1;border:2px dashed #b8c9ab;border-radius:15px;background:#f2f5ec;padding:0;display:grid;place-items:center;min-width:0;isolation:isolate}.sequence-slot:not(.occupied):hover,.sequence-slot.drop-target{border-color:var(--green);background:#e7efdf;box-shadow:0 0 0 4px #dae5d14f}.slot-placeholder{display:flex;align-items:center;color:#aebea3}.slot-placeholder svg{width:36px;height:36px;stroke-width:1.1}.sequence-slot.occupied{border:1px solid #cbd7bf;background:var(--surface);box-shadow:0 3px 7px #3e4d3010;touch-action:none}.sequence-slot .sprite{position:absolute;inset:0;border-radius:14px;pointer-events:none}.sequence-slot.selected{border:2px solid var(--green);box-shadow:0 0 0 4px #dae5d1}.sequence-slot.correct{border:3px solid #6b9570}.sequence-slot.correct:after{content:'';width:10px;height:10px;border-radius:50%;background:#6b9570;position:absolute;bottom:-21px;left:calc(50% - 5px)}.sequence-slot.needs-change{border:3px solid #d8a75a;animation:gentle-shake .35s}.sequence-slot.hint-flash{animation:hint-glow .8s}.game-actions{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:42px}.round-button{width:58px;height:58px;background:#fffefa;box-shadow:0 2px 5px #384c3508}.round-button svg{width:26px;height:26px}.hint-button{color:#99783e;background:#f8efdc;border-color:#eeddb9}.check-button{width:70px;height:70px;color:white;background:var(--green);border-color:var(--green);box-shadow:0 5px 10px #31543e15}.check-button svg{width:32px;height:32px;stroke-width:2}.check-button:not(:disabled):hover{background:var(--green-dark);color:white}.check-button:disabled{background:#c7d0bf;border-color:#c7d0bf;box-shadow:none}.round-button:disabled:not(.check-button){opacity:.4}.loading{position:absolute;inset:0;background:#faf9f5ef;display:grid;place-items:center;z-index:20;color:var(--green)}.loading svg{width:38px;height:38px;animation:spin 1.1s linear infinite}.loading[hidden]{display:none}
.success-dialog{border:1px solid var(--line);border-radius:26px;background:var(--paper);color:var(--ink);padding:24px 35px 35px;box-shadow:0 24px 90px #1c2f2530;max-width:420px;width:calc(100% - 32px);max-height:calc(100svh - 40px);text-align:center;overflow:auto}.success-dialog[open]{animation:rise-in .25s both}dialog::backdrop{background:#293c2e55;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;z-index:1}.dialog-close svg{width:20px;height:20px}.success-art{width:100%;height:auto;mask-image:radial-gradient(ellipse 75% 78% at 50% 50%,#000 65%,transparent 100%)}.success-stars{display:flex;justify-content:center;align-items:center;gap:14px;margin:0 0 26px}.success-stars svg{width:46px;height:46px;fill:#f3d395;stroke:#c08a3d;stroke-width:1.3;animation:star-pop .45s both}.success-stars svg:nth-child(2){width:60px;height:60px;animation-delay:.1s}.success-stars svg:nth-child(3){animation-delay:.2s}.success-stars svg.unearned{fill:#eceee7;stroke:#b8c1af}.success-actions{display:flex;align-items:center;justify-content:center;gap:22px}.drag-ghost{position:fixed;z-index:1000;pointer-events:none;width:140px;height:140px;border-radius:15px;border:2px solid var(--green);background-color:var(--surface);box-shadow:0 16px 30px #2e3d3140;transform:rotate(4deg);opacity:.96}.drag-source{opacity:.35}.confetti{position:fixed;pointer-events:none;z-index:2000;width:7px;height:12px;animation:confetti-fall 1.6s ease-out forwards}
@keyframes rise-in{from{transform:translateY(9px)}to{transform:translateY(0)}}@keyframes star-pop{0%{transform:scale(.5) rotate(-15deg)}70%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1)}}@keyframes hint-glow{0%,100%{box-shadow:0 0 0 0 #91ad7860}50%{box-shadow:0 0 0 8px #91ad7860}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes gentle-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes confetti-fall{from{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translate(var(--drift),190px) rotate(300deg);opacity:0}}
@media(max-width:1050px){.picture-toolbar{padding-left:30px;padding-right:30px}main{padding-left:30px;padding-right:30px}.picture-grid{--card-size:176px;--gap:18px}.play-area[data-count='5'] .picture-grid{--card-size:155px}.play-area[data-count='6'] .picture-grid{--card-size:133px;--gap:15px}.play-area[data-count='7'] .picture-grid{--card-size:113px;--gap:13px}.play-area[data-count='8'] .picture-grid{--card-size:98px;--gap:12px}}
@media(max-width:800px){.picture-toolbar{padding:10px 22px 4px;min-height:100px}.toolbar-mascot{width:120px;height:80px}.toolbar-controls{gap:10px}.menu-toggle{height:58px;min-width:80px;padding:5px 9px;gap:7px}.menu-toggle>.sprite{width:41px;height:41px}main{padding:22px 22px 30px}.picture-grid{--card-size:145px;--gap:16px}.play-area[data-count='5'] .picture-grid{--card-size:118px;--gap:14px}.play-area[data-count='6'] .picture-grid{--card-size:100px;--gap:12px}.play-area[data-count='7'] .picture-grid,.play-area[data-count='8'] .picture-grid{grid-template-columns:repeat(4,minmax(0,145px));--gap:18px 16px}.flow-cue{height:62px}.game-actions{margin-top:35px}.chooser-panel{max-height:calc(100svh - 120px)}.story-menu{right:-140px}}
@media(max-width:600px){.picture-toolbar{padding:10px 16px 0;gap:5px;min-height:90px}.toolbar-mascot{width:88px;height:68px}.toolbar-controls{gap:8px}.menu-toggle{height:53px;min-width:71px;padding:5px 7px;gap:4px;border-radius:13px}.menu-toggle>.sprite{height:36px;width:36px}.menu-toggle>svg{height:14px;width:14px}.difficulty-dots{width:33px;grid-template-columns:repeat(3,8px);gap:4px}.difficulty-dots span{height:8px;width:8px}.toolbar-controls>.icon-button{width:42px;height:42px}.toolbar-controls>.icon-button svg{width:20px;height:20px}main{padding:20px 16px 30px}.play-area{padding-top:6px}.picture-grid,.play-area[data-count='5'] .picture-grid,.play-area[data-count='6'] .picture-grid,.play-area[data-count='7'] .picture-grid,.play-area[data-count='8'] .picture-grid{grid-template-columns:repeat(2,minmax(0,155px));--gap:16px}.picture-card,.bank-empty,.sequence-slot{border-radius:12px}.picture-card .sprite,.sequence-slot .sprite{border-radius:11px}.flow-cue{height:52px}.slot-placeholder svg{height:30px;width:30px}.game-actions{margin-top:34px;gap:19px}.round-button{height:54px;width:54px}.check-button{height:66px;width:66px}.chooser-panel{position:fixed;left:16px;right:16px;top:98px;width:auto;max-width:none;max-height:calc(100svh - 116px);padding:21px}.chooser-panel h2{font-size:21px}.story-options{gap:8px}.story-option{font-size:13px;padding:8px;gap:7px}.story-thumb{height:40px;width:40px}.menu-legend{font-size:11px;gap:10px}.drag-ghost{width:120px;height:120px}}
@media(max-width:370px){.toolbar-mascot{width:65px}.toolbar-controls{gap:6px}.menu-toggle{min-width:65px;padding:5px}.picture-grid{--gap:13px}.story-option{font-size:12px}.story-thumb{height:35px;width:35px}.chooser-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.confetti{display:none}}