@import url('../farm/style.css');
:root{background:#f8f3e7;color:#586d75}
.brand-mark{background:#dfefec}.brand-mark svg{width:35px;height:35px}.brand small{color:#779f9b;font-size:9px;letter-spacing:1.3px}.brand h1{color:#416f7b}
.memory-world{background:radial-gradient(ellipse at 50% 10%,#fff7e5,#e4efea 70%,#dce8e7);border-color:#c8ded7}
.memory-order{min-width:0;padding:12px 14px 13px 18px;border-color:#c6d8db;border-bottom-color:#94b6c0;box-shadow:0 5px 20px #648a8315}.memory-order .order-content{gap:15px}.order-memory{width:43px;height:43px;color:#519eaa}
#question{margin:0;color:#456d7d;font:500 20px/1.5 Mitr,sans-serif;outline:none}.listen{width:51px;height:51px;background:#398b9d;color:#fffef2;border:3px solid #fffdf3;outline:2px solid #286e81;box-shadow:0 4px #286e81}.listen:hover{background:#307f92}
.round-progress{top:29px}.progress-star{width:28px;height:28px;color:#b2c8c5}.progress-star.earned{color:#dba438}.bottom-note{left:24px;bottom:25px;min-height:58px;padding:9px 16px;border:2px solid #bed8d0;border-bottom:4px solid #9cbcb2;max-width:70%;gap:12px}.bottom-note>.icon{color:#70988a;width:26px;height:29px}.bottom-note p{font-size:12px;color:#54766a}.bottom-note.success{background:#fff4ce;border-color:#d3b56a}.bottom-note.success p{color:#84662f}
.memory-world .hint-button{top:auto;position:absolute;right:28px;bottom:29px;z-index:5;display:grid;place-items:center;width:62px;height:62px;background:#efbd61;color:#795728;border:3px solid #fff9df;border-radius:21px;outline:2px solid #ad7e37;box-shadow:0 5px #a97d40;cursor:pointer;touch-action:manipulation}.hint-button .icon{width:31px;height:31px}.hint-button:hover{background:#f5cd7b}.hint-button:disabled{opacity:.45;cursor:default}.hint-button:focus-visible{outline:4px solid #1d639b;outline-offset:5px}
.dialog-mark{display:grid;place-items:center;width:90px;height:84px;margin:0 auto 12px;border-radius:27px;background:#e1eeea;color:#489ba5}.dialog-mark svg{width:65px;height:65px}.memory-demo{display:flex;gap:16px;align-items:center;justify-content:center;margin:22px auto;--toy-color:#f3c451}.memory-demo svg{width:70px;height:70px}.memory-demo .demo-pair{width:36px;height:36px;color:#66b0ad}.memory-demo span{padding:10px;border:3px solid #59aaa9;border-radius:20px;background:#fff9e8;box-shadow:0 5px #c2d8cb}.primary{background:#448e9d;border-color:#2c7180;box-shadow:0 4px #296775}.primary:hover{background:#327c8c}.primary .icon{width:23px;height:23px;margin-left:7px;vertical-align:middle}.tap-help{font-size:12px;line-height:1.8;color:#7f9185}.motion-setting input{accent-color:#448e9d}.close{background:#dfeae0;color:#67806e}
.fallback-memory{position:absolute;inset:23% 9% 17%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:22px}.fallback-memory[data-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}.fallback-memory button{display:grid;place-items:center;width:100%;height:100%;max-width:220px;max-height:200px;min-height:64px;min-width:64px;padding:18px;border:5px solid #fffbed;outline:3px solid #368f9c;border-radius:25px;background:#79c2c7;box-shadow:0 7px #458f9c;cursor:pointer;touch-action:manipulation}.fallback-memory svg{width:100%;height:100%;max-height:135px}.fallback-memory button.open{background:#fff9e9;outline-color:#63b6b7}.fallback-memory button.matched{outline:5px solid #dfa52f;background:#fff0b6;box-shadow:0 7px #c59d49}.fallback-memory button:focus-visible{outline:5px solid #285f9b;outline-offset:6px}.fallback-memory button:disabled{cursor:default}
.memory-controls button[data-kind="choice"]{touch-action:manipulation;-webkit-user-select:none;user-select:none}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.memory-order{top:18px}.bottom-note{left:20px}.round-progress{left:20px}}
@media(orientation:portrait){.fallback-memory,.fallback-memory[data-count="8"]{inset:20% 14% 15%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:24px}.fallback-memory[data-count="8"]{grid-template-rows:repeat(4,minmax(0,1fr))}.fallback-memory button{max-height:180px;max-width:210px}}
@media(max-width:600px){.brand h1{font-size:11px}.brand small{font-size:6px;letter-spacing:.6px}.memory-order{top:15px;padding:9px 11px}.memory-order .order-content{gap:9px}.order-memory{width:29px;height:32px}#question{font-size:15px}.listen{width:43px;height:43px}.round-progress{top:106px;left:17px;flex-direction:row;gap:9px;align-items:center}#progress{display:flex;gap:4px}.progress-star{width:20px;height:20px}.bottom-note{left:15px;bottom:22px;min-height:50px;padding:8px 11px;gap:7px;max-width:73%}.bottom-note p{font-size:10px}.bottom-note>.icon{width:23px}.memory-world .hint-button{right:20px;bottom:27px;width:48px;height:49px;border-radius:17px}.hint-button .icon{width:26px;height:26px}.fallback-memory,.fallback-memory[data-count="8"]{inset:25% 10% 17%;gap:20px}.fallback-memory button{padding:10px;border-width:3px;border-radius:20px}.memory-demo{gap:10px}.memory-demo svg{width:58px;height:58px}}
@media(max-height:650px) and (min-width:601px){.memory-order{top:10px;padding-block:6px}#question{font-size:17px}.order-memory{width:35px;height:36px}.listen{width:44px;height:44px}.round-progress{top:20px}.bottom-note{bottom:16px}.memory-world .hint-button{bottom:20px;width:53px;height:53px}}