@import url('../memory/style.css');
:root{background:#f8f3e7;color:#586d75}
.brand-mark{background:#f8e9ca}.brand small{color:#a58d69}.brand h1{color:#79664e}
.blocks-world{background:radial-gradient(ellipse at 50% 18%,#fff9e9,#e7eee6 70%,#dce8e3);border-color:#dbdac0}
.blocks-order{min-width:0;padding:10px 14px 11px 17px;border-color:#d5bc8b;border-bottom-color:#baa171}.blocks-order .order-content{gap:13px}.order-blocks{width:45px;height:45px}
#question{color:#71634e;font-size:20px}.listen{background:#3d97af;outline-color:#26748b;box-shadow:0 4px #26748b}.listen:hover{background:#31849e}
.progress-star{width:22px;height:22px;color:#bac9bb}.progress-star.earned{color:#e4ad40}#round{color:#9b8564}.round-progress{top:29px}
.blocks-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}
.blocks-world .hint-button:disabled{opacity:.45}.blocks-world .hint-button:focus-visible{outline:4px solid #1d639b;outline-offset:5px}
.blocks-controls{position:absolute;inset:0;pointer-events:none}.blocks-controls button{position:absolute;pointer-events:auto;background:transparent;border:0;border-radius:15px;padding:0;opacity:1;-webkit-user-select:none;user-select:none}
.blocks-controls button[data-kind="choice"]{cursor:grab;touch-action:none}.blocks-controls button[data-kind="choice"]:active{cursor:grabbing;translate:none}.blocks-controls button[data-kind="target"]{touch-action:manipulation}
.blocks-controls button:focus-visible{outline:5px solid #226aa3;outline-offset:3px;background:#ffffff15}.blocks-controls button:disabled{cursor:default;pointer-events:none}
.blocks-scene-label{position:absolute;pointer-events:none;padding:5px 15px;border:2px solid #fff9e8;border-radius:16px;background:#fcf7e8ed;color:#80745d;font-size:14px;white-space:nowrap;box-shadow:0 3px #bbbea244}
.blocks-scene-label.build{background:#e1f3eb;color:#3b7e71}
.dialog-mark{background:#f6e8ca}.dialog-mark svg{width:75px;height:75px}.blocks-demo{display:flex;align-items:center;justify-content:center;gap:16px;margin:24px 0}.blocks-demo svg{width:95px;height:95px}.blocks-demo .demo-arrow{width:34px;height:34px;color:#8f9c83}
.primary{background:#3c91a6;border-color:#286d81;box-shadow:0 4px #286477}.primary:hover{background:#307e95}
.bottom-note{max-width:72%}.bottom-note p{font-size:12px}.motion-setting input{accent-color:#3c91a6}
.fallback-blocks{position:absolute;inset:18% 7% 16%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:24px 36px;align-items:center}
.fallback-blocks section{text-align:center;min-width:0}.fallback-blocks b{display:inline-block;background:#fff8e8;border-radius:14px;padding:6px 20px;margin-bottom:15px;font-weight:400;font-size:14px}
.block-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:5px;margin:auto;width:min(100%,calc(var(--cols)*95px));height:calc(var(--rows)*90px)}
.block-grid>span,.block-grid>button{min-width:0;min-height:0;display:grid;place-items:center}.block-grid svg{width:100%;height:100%}.block-grid button{border:4px dashed #389e9b;border-radius:14px;background:#d6eee6;color:#68a79b;font-size:32px}.block-grid button.filled{border-color:transparent;background:transparent;opacity:1}.block-grid button.hinted{outline:4px solid #e9b743;outline-offset:3px}.block-grid button.wrong{border-color:#c47359}
.fallback-choices{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:20px;padding-top:14px}.fallback-choices button{width:100px;height:100px;border:4px solid #fff8df;outline:3px solid #3a9b9c;border-radius:20px;background:#eff7ed;box-shadow:0 6px #a8c9bb}.fallback-choices svg{width:100%;height:100%}.fallback-choices button[aria-pressed="true"]{outline:5px solid #e3ac32;background:#fff0bb}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.round-progress{left:20px}.blocks-order{top:18px}.blocks-scene-label{font-size:13px}}
@media(max-width:600px){.brand h1{font-size:11px}.brand small{font-size:6px}.blocks-order{top:15px;padding:8px 10px}.blocks-order .order-content{gap:8px}.order-blocks{width:30px;height:33px}#question{font-size:15px}.round-progress{top:100px;left:17px;flex-direction:row;align-items:center;gap:9px}#progress{display:flex;gap:4px}.progress-star{width:16px;height:16px}.blocks-world .hint-button{right:20px;bottom:27px;width:48px;height:49px;border-radius:17px}.bottom-note p{font-size:10px}.blocks-scene-label{font-size:11px;padding:4px 10px}.fallback-blocks{inset:26% 5% 18%;gap:20px 18px}.block-grid{height:calc(var(--rows)*64px)}.fallback-choices{gap:12px}.fallback-choices button{width:64px;height:70px;border-width:3px;border-radius:14px}}
@media(max-height:650px) and (min-width:601px){.blocks-order{top:10px;padding-block:6px}#question{font-size:17px}.order-blocks{width:35px;height:36px}.blocks-world .hint-button{bottom:20px;width:53px;height:53px}.round-progress{top:20px}}