@import url('../memory/style.css');
:root{background:#f9f3e8;color:#6f604c}.brand-mark{background:#f4dfbc}.brand h1{color:#765f48}.brand small{color:#a28b6b}
.size-world{background:radial-gradient(ellipse at 50% 10%,#fff8e8,#eeeeda 65%,#d8e9de);border-color:#dddbba}.size-order{min-width:0;padding:10px 14px 12px 17px;border-color:#e1d1b0;border-bottom-color:#c2ae83}.size-order .order-content{gap:12px}.order-symbol{width:43px;height:43px}#question{font-size:22px;color:#765e46}.round-progress{top:28px}.progress-star{width:23px;height:23px}.listen{background:#419c99;outline-color:#287b7a;box-shadow:0 4px #287b7a}
.size-world .hint-button{position:absolute;top:auto;right:26px;bottom:26px;display:grid;place-items:center;min-width:62px;min-height:62px;border:3px solid #fff9df;border-radius:21px;outline:2px solid #ad7e37;background:#efbd61;color:#795728;box-shadow:0 5px #a97d40;touch-action:manipulation}.size-world .hint-button .icon{width:32px;height:32px}.size-world .hint-button:focus-visible{outline:4px solid #226bbb;outline-offset:5px}.size-world .bottom-note{bottom:26px;max-width:calc(100% - 135px);min-height:55px;gap:13px}.bottom-note p{font-size:13px}
.dialog-mark{background:#f3e2c7}.dialog-mark svg{width:65px;height:65px}.primary{background:#3f9793;border-color:#2d7774;box-shadow:0 4px #296a68}.primary:hover{background:#328783}.size-demo{display:flex;align-items:flex-end;justify-content:center;gap:13px;margin:25px auto}.size-demo svg{width:80px;height:80px}.size-demo .small-bear{width:47px;height:47px}.size-demo .medium-bear{width:65px;height:65px}.size-demo .large-bear{width:86px;height:86px}.size-demo .demo-match{width:20px;height:20px;align-self:center;color:#5a9b94}
.size-controls button[data-bear],.fallback-tray button{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.size-controls button[data-slot],.fallback-slots button{touch-action:manipulation}.size-controls button:focus-visible{outline:4px solid #1768ae;outline-offset:6px}.size-controls button.dragging{cursor:grabbing}.size-controls [data-slot].drop-ready{outline:5px solid #ffe197;box-shadow:0 0 0 5px #d6a63c;border-radius:24px}
.size-guide{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}.size-guide[hidden]{display:none}.size-guide *{pointer-events:none}.size-guide .guide-ring{position:absolute;box-sizing:border-box;border:5px solid #fff9e6;outline:3px solid #e9a83d;border-radius:50%;width:58px;height:58px}.size-guide img{position:absolute;width:112px;height:112px;filter:drop-shadow(0 4px 4px #675b4738);transform-origin:35.84px 9.52px}.size-guide .guide-piece{position:absolute;left:0;top:0;width:98px;height:144px;filter:drop-shadow(0 6px 4px #55433150)}.guide-piece svg{display:block;width:100%;height:100%}
.size-drag-ghost{display:grid;place-items:end center;filter:drop-shadow(0 9px 7px #473b3350);will-change:transform}.size-drag-ghost svg{width:100%;height:100%}
.fallback-sizes{position:absolute;inset:130px 6% 100px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;--count:3}.fallback-slots,.fallback-tray{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:18px;align-items:end;min-height:0}.fallback-slots{flex:1}.fallback-tray{flex:1;padding:10px 14px 14px;border-radius:30px;background:#eadcc3;border-bottom:7px solid #c4ae86;box-shadow:inset 0 2px #fff9e3}.fallback-sizes button{position:relative;min-width:48px;min-height:48px;padding:0;border:0;background:transparent;display:grid;place-items:end center;border-radius:23px;align-self:stretch}.fallback-slots button{padding-bottom:20px}.fallback-sizes button svg{display:block;width:100%;height:100%;max-height:230px;align-self:end}.fallback-slots .podium{position:absolute;bottom:0;left:5%;right:5%;height:23px;background:#fff0bc;border:4px solid #d6a541;border-radius:10px;box-shadow:0 6px #b89043}.fallback-slots button.filled .podium{border-color:#3a9f94;background:#b8e1c9;box-shadow:0 6px #32887e}.fallback-slots button:enabled{cursor:pointer}.fallback-slots button.drop-ready .podium,.fallback-slots button.hinted .podium{outline:4px solid #ffd45e;outline-offset:3px}.fallback-tray button{border:4px solid #319a94;border-bottom-width:7px;background:#f9f0db;box-shadow:0 4px #257a74}.fallback-tray button.selected{border-color:#dca332;background:#fff0b5;box-shadow:0 4px #aa792d}.fallback-tray button.wrong{border-color:#d69a75}.fallback-tray button.used{visibility:hidden}.fallback-sizes button:disabled{cursor:default;opacity:1}.fallback-sizes button:focus-visible{outline:4px solid #1768ae;outline-offset:5px}.empty-slot{align-self:center;font-size:45px;color:#c4aa72}.motion-setting input{accent-color:#419c99}
@media(orientation:portrait){.size-order{top:20px}.size-world .bottom-note{bottom:28px}.size-world .hint-button{bottom:29px}.fallback-sizes{inset:170px 4% 145px;justify-content:space-around;gap:60px}.fallback-sizes button svg{max-height:280px}.fallback-slots,.fallback-tray{gap:12px}}
@media(max-width:900px){.brand h1{font-size:14px}.brand small{font-size:8px}.progress-star{width:20px;height:20px}.round-progress{left:20px}#question{font-size:20px}}
@media(max-width:600px){body{min-height:680px}.brand h1{font-size:11px}.brand small{font-size:6px}.size-order{top:16px;padding:8px 10px}.order-symbol{width:32px;height:32px}.size-order .order-content{gap:8px}#question{font-size:17px}.listen{width:42px;height:42px}.round-progress{top:99px;left:17px;flex-direction:row;align-items:center;gap:9px}#progress{display:flex;gap:3px}.progress-star{width:17px;height:17px}.size-world .bottom-note{left:15px;bottom:24px;max-width:calc(100% - 100px);padding:8px 10px;gap:9px}.bottom-note p{font-size:11px}.size-world .hint-button{right:20px;bottom:27px;min-width:48px;min-height:49px;border-radius:16px}.size-world .hint-button .icon{width:26px;height:26px}.fallback-sizes{inset:155px 3% 115px;gap:30px}.fallback-slots,.fallback-tray{gap:7px}.fallback-tray{padding:9px 5px}.fallback-tray button{border-width:3px;border-radius:15px}.fallback-slots .podium{left:0;right:0;border-width:3px}.size-demo{gap:10px}}
@media(max-height:700px) and (min-width:601px){.size-order{top:11px;padding-block:6px}#question{font-size:18px}.order-symbol{width:33px;height:33px}.listen{width:42px;height:42px}.size-world .bottom-note{bottom:19px}.size-world .hint-button{bottom:23px;min-width:53px;min-height:53px}.fallback-sizes{inset:105px 10% 90px;gap:20px}.fallback-sizes button svg{max-height:160px}}
@media(forced-colors:active){.fallback-tray button,.fallback-slots .podium{border-color:ButtonText}.fallback-tray button.selected{outline:4px solid Highlight}}