@import url('../memory/style.css');
:root{background:#f8f3e7;color:#526b68}.brand-mark{background:#e4ecd2}.brand h1{color:#567a60}.brand small{color:#8c9c78}.sequence-world{background:radial-gradient(ellipse at 50% 5%,#fff8e9,#edf0dc 60%,#e0ebdf);border-color:#d1ddc4}
.sequence-order{min-width:0;padding:9px 17px;background:#fffaf0;border-color:#c6d7b8;border-bottom-color:#9db28e}.sequence-order .order-content{gap:14px}.order-story{width:42px;height:46px}#story-name{font-size:11px;line-height:1.3;margin:0 0 3px;color:#73896b}#question{font-size:21px;color:#52775d}.listen{background:#6e9f75;outline-color:#4d7d59;box-shadow:0 4px #4d7d59}.listen:hover{background:#5a8c62}.round-progress{top:28px}.progress-star{width:23px;height:23px}
.bottom-note{bottom:24px;max-width:calc(100% - 215px);min-height:55px}.bottom-note p{font-size:13px}.story-actions{position:absolute;bottom:28px;right:25px;display:flex;gap:17px;pointer-events:auto}.story-actions button{display:grid;place-items:center;min-inline-size:58px;min-block-size:58px;border:3px solid #fffbed;border-radius:19px;outline:2px solid #6f9b92;background:#a0c9bf;color:#356e65;box-shadow:0 5px #6f9b92;cursor:pointer;touch-action:manipulation}.story-actions button:last-child{background:#f3ca72;color:#84602d;outline-color:#b58b3d;box-shadow:0 5px #b58b3d}.story-actions button .icon{width:30px;height:30px}.story-actions button:disabled{opacity:.42;cursor:default}.story-actions button:focus-visible{outline:4px solid #205faa;outline-offset:5px}.sequence-controls button{min-inline-size:48px;min-block-size:48px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.sequence-controls button:focus-visible{outline:5px solid #255eaa;outline-offset:5px}.sequence-controls button.is-wrong{background:#e3a75c20!important;outline:4px solid #d5924b!important;animation:gentle-wiggle .38s ease-in-out}
.dialog-mark{background:#e6edd8;color:#71985d}.story-demo{display:flex;align-items:center;justify-content:center;gap:16px;margin:15px auto}.story-demo span{width:120px;border:3px solid #7eaa8c;border-radius:24px;background:#f4f5e6;box-shadow:0 5px #b7cdb5}.story-demo svg{display:block;width:100%;height:auto}.story-demo b{color:#b3a073;font-size:32px;font-weight:400}.primary{background:#729c62;border-color:#527b49;box-shadow:0 4px #527b49}.primary:hover{background:#608950}.motion-setting input{accent-color:#729c62}
.sequence-guide{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}.sequence-guide[hidden]{display:none}.sequence-guide img{position:absolute;left:calc(var(--tap-x) - 36px);top:calc(var(--tap-y) - 9px);width:112px;height:112px;filter:drop-shadow(0 4px 3px #63567a44);transform-origin:36px 9px;animation:story-tap 1.2s ease-in-out infinite}.tap-ring{position:absolute;left:calc(var(--tap-x) - 35px);top:calc(var(--tap-y) - 35px);width:70px;height:70px;border:4px solid #fffde8;border-radius:50%;box-shadow:0 0 0 4px #e3aa3d;animation:story-ring 1.2s ease-out infinite}.sequence-guide.static img,.sequence-guide.static .tap-ring,.reduce-motion .sequence-guide img,.reduce-motion .tap-ring{animation:none}@keyframes story-tap{0%,100%{transform:translateY(-14px) rotate(-7deg)}45%,62%{transform:translateY(0) scale(.94)}}@keyframes story-ring{0%,30%{opacity:0;transform:scale(.7)}55%{opacity:1}100%{opacity:0;transform:scale(1.3)}}@keyframes gentle-wiggle{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.fallback-sequence{position:absolute;inset:145px 7% 110px;display:flex;flex-direction:column;justify-content:space-around;gap:40px}.fallback-slots,.fallback-choices{display:flex;align-items:center;justify-content:center;gap:25px}.fallback-slot{display:grid;place-items:center;flex:1;max-width:210px;aspect-ratio:1;min-width:0;border:4px dashed #a6b69c;background:#f5f3e2;border-radius:27px;color:#9caa90;font-size:40px}.fallback-slot.filled{border:4px solid #79a68c;background:#fff9df;box-shadow:0 6px #abc4aa}.fallback-slot svg{width:100%;height:100%}.slot-arrow{font-size:30px;color:#9caa8e}.fallback-choices button{position:relative;flex:1;max-width:225px;min-inline-size:70px;min-block-size:70px;aspect-ratio:1;padding:8px;border:5px solid #fffbee;outline:4px solid #5c9f96;border-radius:28px;background:#f2edda;box-shadow:0 8px #54958a;cursor:pointer;touch-action:manipulation}.fallback-choices button:nth-child(2){outline-color:#d5a048;box-shadow:0 8px #c5913e}.fallback-choices button:nth-child(3){outline-color:#a087b8;box-shadow:0 8px #866ca1}.fallback-choices button svg{display:block;width:100%;height:100%}.fallback-choices button.placed{opacity:.25;box-shadow:none}.fallback-choices button.hinted{outline:6px solid #e0aa38;box-shadow:0 0 0 12px #fff3b9}.fallback-choices button:focus-visible{outline:5px solid #205faa;outline-offset:8px}.fallback-choices button.is-wrong{animation:gentle-wiggle .38s ease-in-out}.fallback-choices button:disabled{cursor:default}.fallback-sequence.solved .fallback-slots{flex:1}.fallback-sequence.solved .fallback-choices{display:none}.fallback-sequence.solved .fallback-slot{max-width:260px}
@media(orientation:portrait){.fallback-sequence{inset:210px 6% 145px;gap:75px}.fallback-slots,.fallback-choices{gap:23px}.fallback-choices button{max-width:230px}}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.progress-star{width:20px;height:20px}#question{font-size:18px}.round-progress{left:20px}}
@media(max-width:600px){body{min-height:780px}.brand h1{font-size:11px}.brand small{font-size:6px}.sequence-order{top:15px;padding:8px 12px;max-width:95%}.sequence-order .order-content{gap:9px}.order-story{width:32px;height:35px}#story-name{font-size:10px}#question{font-size:16px}.round-progress{top:104px;left:17px}.progress-star{width:17px;height:17px}.bottom-note{left:16px;bottom:24px;min-height:49px;max-width:calc(100% - 155px);padding:8px 10px;gap:7px}.bottom-note p{font-size:10px}.story-actions{bottom:28px;right:18px;gap:13px}.story-actions button{min-width:47px;min-height:48px;border-radius:16px}.story-actions button .icon{width:25px;height:25px}.fallback-sequence{inset:165px 7% 120px}.fallback-slots,.fallback-choices{gap:17px}.fallback-slot{border-radius:17px;font-size:27px}.slot-arrow{font-size:18px}.fallback-choices button{border-width:3px;outline-width:3px;padding:3px;border-radius:18px}.story-demo{gap:12px}.story-demo span{width:103px}}
@media(max-height:700px) and (min-width:601px){.sequence-order{top:11px;padding-block:6px}#question{font-size:17px}.order-story{width:33px;height:37px}.listen{width:43px;height:43px}.story-actions{bottom:23px}.story-actions button{min-width:51px;min-height:51px}.fallback-sequence{inset:135px 9% 100px;gap:20px}.fallback-choices button{max-width:165px}.fallback-slot{max-width:140px}}
.reduce-motion .is-wrong{animation:none!important}@media(prefers-reduced-motion:reduce){.sequence-guide img,.tap-ring,.is-wrong{animation:none!important}}@media(forced-colors:active){.fallback-choices button,.story-actions button{border-color:ButtonText;outline-color:ButtonText}.fallback-slot{border-color:CanvasText}}