@import url('../mecha-match/match.css');
.layout{grid-template-columns:minmax(0,1fr) 290px}.parade-stars{color:#eca246;font-size:28px;display:flex;gap:22px;align-items:center;transform:rotate(-8deg)}.parade-stars span{color:#a575d2;font-size:80px}.round-mark{font-size:48px;color:#b48cdb}.rounds{display:flex;gap:7px;margin:8px 0 20px}.rounds button{width:34px;height:34px;min-width:0;border:1px solid #e4d7ec;border-radius:50%;background:#f2eaf9;color:#87669f;font-size:11px;font-weight:750;position:relative}.rounds button[aria-current=step]{background:#8052bd;color:white;border-color:#8052bd;box-shadow:0 0 0 3px #eaddf4}.rounds button.complete:not([aria-current=step]){background:#e8f4cd;border-color:#cee69c;color:#57742b}.rounds button:disabled{opacity:.4;cursor:default}.read-order{font-size:11px;color:#9984a4;margin-bottom:14px}.pattern{list-style:none;padding:18px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:linear-gradient(130deg,#eee0fb,#fce8d4);border-radius:20px;border:1px solid #eee0f3}.pattern.short{grid-template-columns:repeat(3,minmax(0,1fr))}.pattern.long{grid-template-columns:repeat(5,minmax(0,1fr))}.friend{position:relative;min-width:0;background:#fff9eb;border:2px solid white;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:8px 3px 7px;box-shadow:0 3px 0 #d2bcdf33}.friend img{width:100%;height:110px;object-fit:contain;display:block}.friend b{font-size:10px;font-weight:750;margin-top:3px}.friend .position{position:absolute;top:5px;left:6px;font-size:8px;color:#a48eab}.friend.gap{background:#f4dcf3;border:2px dashed #cb81ca;justify-content:center;color:#9e51ac;min-height:145px}.gap .question{font-size:54px;line-height:1.2;font-weight:850}.gap b{color:#a068a9}.friend.filled{background:#f1f9dd;border:2px solid #b3cd7d;animation:happy-pop .4s ease-out}.pick-heading{display:flex;align-items:center;justify-content:space-between;margin-top:26px}.pick-heading .eyebrow{font-size:8px;color:#a987ad;margin-bottom:0}.pick-heading h3{font-size:22px;letter-spacing:-.5px;margin:4px 0 16px}.pick-heading>span{font-size:34px;color:#b595ce}.choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.choices button{font:inherit;cursor:pointer;color:#684a79;background:#f5edfd;border:2px solid #e4d2f2;padding-top:5px;transition:transform .15s,border-color .15s}.choices button img{height:95px}.choices button:hover:not(:disabled){transform:translateY(-4px);border-color:#ae7ed4}.choices button:disabled{cursor:default}.choices button.wrong{opacity:.42}.choices button.right{background:#e9f3cd;border-color:#a5c664}.choices button b{font-size:11px}.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}.choices.four{grid-template-columns:repeat(4,minmax(0,1fr))}.choices.three button img{height:110px}#status{font-size:13px;line-height:1.6;color:#80628e;min-height:42px;margin:18px 0 8px}.tools{display:flex;gap:9px;flex-wrap:wrap}.tools button{border:1px solid #e1d2ed;color:#805794;border-radius:10px;background:#f5eff9;padding:11px;font-size:11px}.hint-panel{margin-top:15px;background:#fff2d4;border:1px solid #f1d9a8;border-radius:15px;padding:15px}.hint-panel>p{font-size:12px;line-height:1.7;color:#997c5c;margin:0 0 10px}.loop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.loop img{width:42px;height:50px;object-fit:contain}.loop>span{display:flex;flex-direction:column;align-items:center;font-size:9px;color:#8c657e}.loop>i{font-style:normal;color:#c29e67}.success{background:#edf5d8;display:flex;align-items:center;gap:14px;padding:20px;border-radius:17px;margin-top:18px}.success>span{font-size:40px;color:#98b54b}.success h3{font-size:18px;margin:0 0 5px}.success p{font-size:12px;line-height:1.5;margin:0;color:#7e8c5a}.success button{margin-left:auto;border:0;background:#8052bd;color:white;border-radius:11px;padding:12px;font-weight:700;font-size:12px;white-space:nowrap}.world{height:280px}.world img{object-position:center 30%}.collection{border-top:1px solid #e8deeb;padding-top:16px;margin-top:20px;font-size:11px;font-weight:750;color:#8b679c}.progress-track{height:8px;background:#eee0f6;border-radius:8px;overflow:hidden;margin-top:10px}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d0e89c,#b17edd);transition:width .25s}.guide .gentle{font-size:17px}.keyboard{font-size:11px;line-height:1.7;color:#97879f}@keyframes happy-pop{0%{transform:scale(.85)}70%{transform:scale(1.08)}100%{transform:scale(1)}}@media(max-width:1050px){.layout{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.pattern{padding:12px;gap:7px}.friend img{height:90px}.friend.gap{min-height:125px}.choices button img{height:80px}.parade-stars{display:none}.friend b{font-size:9px}}@media(max-width:720px){.layout{grid-template-columns:1fr}.pattern{padding:10px;gap:6px}.friend img{height:80px}.friend.gap{min-height:114px}.pattern.long{grid-template-columns:repeat(5,minmax(0,1fr))}.pattern.long .friend{padding-inline:0}.pattern.long .friend img{height:62px}.pattern.long .friend b{font-size:7px}.pattern.long .friend.gap{min-height:94px}.pattern.long .question{font-size:34px}.choices{gap:6px}.choices button img{height:70px}.choices button b{font-size:9px}.choices.three button img{height:100px}.success{padding:14px;flex-wrap:wrap}.success button{margin-left:0}.success>span{font-size:28px}.rounds{gap:5px}.rounds button{width:28px;height:28px}.pick-heading h3{font-size:20px}.world{height:100%}.friend .position{top:3px;left:4px;font-size:7px}}@media(max-width:380px){.rounds{gap:4px}.rounds button{width:24px;height:26px}.pattern.long{grid-template-columns:repeat(5,minmax(0,1fr))}.pattern.long .friend img{height:50px}.pattern.long .friend b{font-size:6px}.pattern.long .friend.gap{min-height:80px}.choices button b{font-size:8px}.friend.gap{min-height:110px}}@media(prefers-reduced-motion:reduce){.friend.filled{animation:none}.choices button,.progress-track span{transition:none}}
.rounds{overflow-x:auto;padding:4px 3px 8px}.rounds button{flex:0 0 38px;width:38px;height:38px}@media(max-width:720px){.rounds button{flex-basis:44px;width:44px;height:44px}.pattern.long{grid-template-columns:repeat(3,minmax(0,1fr))}.pattern.long .friend img{height:80px}.pattern.long .friend b{font-size:10px}.pattern.long .friend.gap{min-height:114px}.choices,.choices.four{grid-template-columns:repeat(3,minmax(0,1fr))}.choices button b{font-size:11px}.pattern.long .question{font-size:42px}}
@media(min-width:1051px){.pattern,.pattern.short,.pattern.long{grid-template-columns:repeat(var(--count),minmax(0,1fr));padding:14px;gap:7px}.friend.gap{min-height:145px}.gap .question{font-size:40px}.gap b{font-size:8px}.choices{max-width:580px;margin-inline:auto}}
.layout>*{min-width:0}.rounds{max-width:100%}
.friend img{mix-blend-mode:multiply}.world{height:auto;aspect-ratio:1}.world img{object-position:center}.world>div{left:16px;bottom:10px}.world h2{font-size:26px}.world .eyebrow{font-size:7px}.friend.gap b{text-align:center}@media(max-width:720px){.world{height:100%;min-height:270px;aspect-ratio:auto}.world img{object-fit:contain;object-position:top;background:#e9d4fb}.world h2{font-size:22px}}
.game-avatar{display:block;flex-shrink:0;margin-left:28px;transform:rotate(4deg);border:5px solid #fff8ed;border-radius:28px;overflow:hidden;box-shadow:0 8px 28px #8c66ad33}.game-avatar img{width:160px;height:160px;object-fit:cover;display:block}.world{height:auto;aspect-ratio:auto;background:#f4e7fb}.world:after{display:none}.world img{width:100%;height:auto;object-fit:contain}.world>div{position:static;color:#694588;padding:15px 18px}.world h2{font-size:26px;line-height:1.1;margin:5px 0}.world .eyebrow{margin:0;font-size:7px}@media(max-width:720px){.game-avatar{display:none}.world{min-height:0;height:auto}.world h2{font-size:20px}.world>div{padding:12px}.world .eyebrow{font-size:6px}}