@charset "UTF-8";
:root{--ink:#443651;--muted:#827589;--pink:#ef7ca7;--hot:#b83c70;--purple:#aa89dc;--cream:#fffaf2;--cell:48px;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;height:auto;overflow:auto}body{font-family:'Jua',ui-rounded,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;background:#f8f2ff;background-image:radial-gradient(#d9cbea 1px,transparent 1px);background-size:22px 22px;color:var(--ink);font-size:16px;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #7450a7;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}img{max-width:100%;object-fit:contain} .game-layout{display:grid;grid-template-columns:240px minmax(320px,470px) 230px;align-items:center;gap:44px;min-height:100svh;max-width:1140px;margin:auto;padding:32px 24px}
.eyebrow,.friends-title>span{font-family:Arial,sans-serif;font-size:12px;font-weight:800;letter-spacing:2px;color:#907aa7}.intro h1{font-size:46px;line-height:1.17;letter-spacing:-2px;margin:17px 0}.intro h1 span{color:var(--pink)}.intro>p{font-size:17px;line-height:1.65;color:var(--muted)}.mascot-sticker{position:relative;margin:28px 0 15px;transform:rotate(-8deg)}.mascot-sticker img{width:225px;filter:drop-shadow(0 7px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff)}.mascot-sticker span{position:absolute;right:0;bottom:14px;background:#fff7d6;border:2px solid white;border-radius:20px;padding:8px 13px;font-size:14px;transform:rotate(13deg);box-shadow:0 4px 12px #6950710d}.instructions{margin-top:32px}.instructions>b{font-size:17px}.instructions p{font-size:14px;color:#796b83;margin:12px 0}.instructions p span{font-family:Arial,sans-serif;font-size:11px;background:#eadef6;border-radius:6px;padding:4px 5px;margin-right:7px;color:#6c4b8d}.desktop-credit{font-size:13px;color:#aa8bbb;margin-top:30px}
#app{position:relative;isolation:isolate;width:100%;max-width:470px;height:auto;min-height:0;margin:0;padding:20px 14px 14px;background:#fffafd;border:4px solid white;border-radius:38px;box-shadow:0 24px 65px #9075b024,0 0 0 1px #eee3f4;overflow:hidden;display:flex;flex-direction:column;gap:0}.app-header{display:flex;align-items:center;justify-content:space-between;padding:0 9px 16px}.wordmark{font-size:26px;letter-spacing:-1px}.wordmark-dot{font-size:23px;color:#e99ab9;margin-left:6px}.icon-button,#mute{width:42px;height:42px;border-radius:15px;background:#f2eafa;border:1px solid #e4d5f1;color:#72528c;font-size:22px;box-shadow:0 3px 0 #e2d4ec}.icon-button:active,#mute:active{transform:translateY(2px);box-shadow:0 1px 0 #e2d4ec}#mute.off{opacity:.5}
#hud{position:relative;padding:0;background:none;box-shadow:none;z-index:2;border:0;flex:none}.row{display:flex;gap:9px;align-items:stretch;margin:0 4px}.stat{background:#f4ecff;border:1px solid #ede0f8;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:18px;min-width:75px;padding:10px 12px;gap:2px;box-shadow:0 3px 0 #eadff3}.stat.wide{flex:1;background:#fff4df;border-color:#f9e9cb;box-shadow:0 3px 0 #f3e6ce}.lbl{font-size:12px;color:#8c7697;line-height:1.35}.stat b{font-size:27px;line-height:1.1;font-weight:400;color:var(--ink)}.stat.wide b{color:#916830}.stat.moves-stat{background:#ffe8f0;border-color:#fbdae6;box-shadow:0 3px 0 #f5d5e2;flex-direction:row;min-width:113px;gap:3px;padding:8px}.moves-stat img{width:36px;height:40px}.moves-stat>div{display:flex;flex-direction:column;align-items:center}.moves-stat b{color:#b64374}
#goalbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 4px 10px;padding:9px 12px;border:1px dashed #dfcee8;border-radius:18px;background:white;min-height:57px}.goal-label{display:flex;align-items:center;gap:5px;font-size:14px;white-space:nowrap}.goal-label img{width:29px;height:29px}#goals{display:flex;gap:8px;align-items:center}.goal{display:flex;gap:2px;align-items:center;background:#f7f0fb;padding:3px 7px 3px 2px;border-radius:12px}.goal .ico{display:block;width:31px;height:31px;border-radius:9px;background-color:transparent!important}.goal b{font-size:14px;font-weight:400;white-space:nowrap}.goal.done{background:#e5f5e8;color:#427248}
#stage{position:relative;flex:none;width:100%;height:auto;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:visible;padding:0;min-height:0;touch-action:none}#board{position:relative;flex:none;width:calc(var(--cell)*8 + 12px);height:calc(var(--cell)*8 + 12px);background:#eedff4;border:0;border-radius:21px;box-shadow:0 5px 0 #dfcde8,inset 0 2px 0 #f8f0fd;overflow:hidden;touch-action:none}.tile{position:absolute;width:var(--cell);height:var(--cell);border:3px solid transparent;background:#fff8fd;background-clip:padding-box;border-radius:13px;pointer-events:none}.kit{position:absolute;width:var(--cell);height:var(--cell);transition:transform .22s cubic-bezier(.2,.8,.3,1);z-index:2;cursor:grab;touch-action:none}.kit .tint{display:none}.kit .pic{position:absolute;inset:1px;background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 2px 1px #6d427524);transition:scale .16s;pointer-events:none}.kit.selected .pic,.kit.sel .pic{scale:1.09;filter:drop-shadow(0 0 3px #b573e2)}.kit.selected:after,.kit.sel:after{content:'';position:absolute;inset:0;border:2px solid #aa75cf;border-radius:12px;pointer-events:none}.kit.hint .pic{animation:hint 1.1s ease-in-out infinite}.kit.pop .pic{animation:pop .34s ease-in forwards}.kit.fresh .pic{animation:appear .35s both}.fallback{background:var(--tint)!important;border-radius:50%}#runway{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:visible}.runner{position:absolute;width:calc(var(--cell)*2.8);height:calc(var(--cell)*2.2);background-size:contain;background-repeat:no-repeat;background-position:center;animation:dash 1.15s cubic-bezier(.22,.52,.42,1) both;transform-origin:center;filter:drop-shadow(0 6px 4px #9b638222)}.dust{position:absolute;width:15px;height:15px;background:#f4c9e9;border-radius:50%;animation:dust .65s ease-out forwards}.float{position:absolute;color:#b34d83;font-size:26px;text-shadow:0 2px white,2px 0 white,-2px 0 white;font-weight:bold;animation:points .95s ease-out forwards}.tip-wrap{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 4px 7px;min-height:40px}.tip-wrap>span{font-family:Arial,sans-serif;font-weight:800;font-size:10px;letter-spacing:1px;color:#9976ac;background:#efe4f5;border-radius:5px;padding:4px 5px}#tip{font-size:13px;line-height:1.45;color:#8b7695;margin:0;padding:0;text-align:left}.app-footer{text-align:center;color:#b099ba;font-size:12px;margin:7px 0 0;padding:8px 0 0;border-top:1px solid #f1e8f3}
.screen{position:absolute;inset:76px 0 0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff6fbe8;backdrop-filter:blur(9px);border-radius:0 0 30px 30px}.hidden-screen{display:none!important}.card{width:100%;max-width:360px;text-align:center;background:#fffdfb;border:3px solid white;padding:25px 25px 20px;border-radius:29px;box-shadow:0 13px 40px #b581a726,0 0 0 1px #f1ddec}.pill{font-size:13px;background:#f0e6fa;color:#8c67a5;display:inline-block;padding:7px 13px;border-radius:30px}.logo .cats{display:flex;justify-content:center;align-items:center;height:125px;position:relative;margin:8px -10px 0}.logo .cats span{display:block;width:106px;height:106px;background-size:contain;background-position:center;background-repeat:no-repeat}.logo .cats span:nth-child(1){transform:rotate(-14deg) translate(17px,9px)}.logo .cats span:nth-child(2){width:136px;height:136px;z-index:2;margin:0 -13px;animation:idle 3s ease-in-out infinite}.logo .cats span:nth-child(3){transform:rotate(14deg) translate(-17px,9px)}.logo h2,.card h2{font-size:38px;letter-spacing:-1px;margin:8px 0 11px;font-weight:400}.logo p,.card>p{font-size:16px;line-height:1.65;color:#937e96;margin:0 0 24px;white-space:pre-line}.big{display:block;width:100%;border:1px solid #e990b3;border-radius:18px;background:#f494ba;color:#63364e;padding:15px 18px;font-size:19px;box-shadow:0 5px 0 #dc739e,inset 0 2px 0 #ffc0d8;transition:transform .15s}.big:active{transform:translateY(4px);box-shadow:0 1px 0 #dc739e}.ghost{display:block;margin:13px auto 0;border:0;background:none;color:#9b819f;padding:10px;font-size:14px}.foot{font-family:Arial,sans-serif;color:#ba9cba;letter-spacing:1px;font-size:10px;margin-top:18px}#sound-note{color:#ad95af;font-size:12px;margin-top:19px}.result-paw{width:66px;height:66px}#r-stars{display:flex;justify-content:center;gap:6px;margin:0 0 4px}#r-stars span{display:block;font-size:0;width:62px;height:62px;background:url('art/ui-star.png') center/contain no-repeat}#r-stars .dim{filter:grayscale(1);opacity:.25}.result-card h2{font-size:29px;margin-bottom:15px}
.friends{align-self:center}.friends-title h2{font-size:25px;letter-spacing:-1px;margin:12px 0 23px;display:flex;align-items:center;gap:6px}.friends-title h2 img{width:32px;height:32px}.friend-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px}.friend-grid>div{text-align:center;background:#fffafcbf;border:2px solid #fff;border-radius:22px;padding:5px 8px 11px;box-shadow:0 5px 0 #e8daef80;transform:rotate(-3deg)}.friend-grid>div:nth-child(even){transform:rotate(3deg)}.friend-grid img{display:block;width:92px;height:86px}.friend-grid b{font-size:14px;font-weight:400;color:#907899}.little-note{margin-top:30px;display:flex;gap:10px;align-items:center;transform:rotate(-3deg)}.little-note img{width:64px;height:64px}.little-note p{font-size:14px;color:#947c9a;line-height:1.7}
@keyframes pop{0%{scale:1}35%{scale:1.18}100%{scale:0;opacity:0}}@keyframes hint{50%{translate:0 -4px;scale:1.07}}@keyframes appear{from{scale:.6;opacity:0}to{scale:1;opacity:1}}@keyframes idle{50%{translate:0 -5px}}@keyframes dash{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}18%{transform:translate(-50%,-50%) scale(1.1);opacity:1}38%{transform:translate(-45%,-55%) scale(1)}100%{transform:translate(470px,-90%) scale(.95);opacity:0}}@keyframes dust{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}@keyframes points{to{transform:translateY(-65px);opacity:0}}
@media(max-width:1050px){.game-layout{grid-template-columns:210px minmax(320px,470px);gap:30px;max-width:780px}.friends{display:none}.intro h1{font-size:40px}}
@media(max-width:730px){body{background:#faf4ff}.game-layout{display:block;padding:12px 8px;max-width:480px;min-height:100svh}.intro,.friends{display:none}#app{border-radius:29px;padding:16px 10px 10px;border-width:3px;box-shadow:0 10px 30px #b09bc31a}.app-header{padding-bottom:14px}.wordmark{font-size:24px}.row{gap:7px}.stat{min-width:70px;padding:9px}.stat b{font-size:25px}.stat.moves-stat{min-width:108px}#goalbar{margin-top:15px;padding:8px 10px}.goal-label{font-size:13px}.goal .ico{width:28px;height:28px}#goals{gap:5px}.goal{padding-right:5px}.screen{inset:69px 0 0;padding:20px}.card{max-width:330px}.tip-wrap{padding-top:12px}#tip{font-size:12px}}
@media(max-width:365px){.goal-label img{display:none}.goal-label{font-size:12px}.goal .ico{width:25px;height:25px}.goal b{font-size:12px}.row{gap:5px}.stat{min-width:59px}.stat.moves-stat{min-width:99px}.card{padding:20px}.logo h2{font-size:32px}.logo .cats{height:100px}.logo .cats span:nth-child(2){width:115px;height:115px}}
@media(prefers-reduced-motion:reduce){.kit.hint .pic,.logo .cats span:nth-child(2){animation:none}.runner{animation-duration:.3s}.kit{transition:none}}

#board:focus-visible{outline:3px solid #b69acd;outline-offset:4px}.kit.key-focus:after{content:"";position:absolute;inset:1px;border:2px dashed #8766a3;border-radius:12px}.low-moves b{color:#9e2455!important}.goal.done b:after{content:" ✓"}.kit.nope .pic{animation:rejected .3s ease-in-out}@keyframes rejected{25%{translate:-3px 0}75%{translate:3px 0}}
