:root{
font-family:Inter,"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
color:#3c415e;
background:#f6f7fc;
--ink:#3c415e;
--muted:#8b8da7;
--accent:#7870c4;
--line:#e5e5ef}
*{
box-sizing:border-box}
body{
margin:0}
button,input,select,textarea{
font:inherit}
button{
cursor:pointer;
border:0;
transition:background .15s,transform .15s;
color:inherit}
button:disabled{
opacity:.4;
cursor:default}
button:not(:disabled):active{
transform:translateY(1px)}
a{
color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px solid #f1ba65;
outline-offset:3px}
.topbar{
max-width:900px;
margin:auto;
padding:20px 0;
width:100%;
display:flex;
align-items:center;
justify-content:space-between}
.brand{
display:flex;
gap:9px;
align-items:center;
text-decoration:none;
color:var(--ink);
font-size:17px;
font-weight:700;
letter-spacing:.03em}
.brand-icon{
font-size:24px;
color:var(--accent)}
.icon-button{
background:#eeedf7;
border-radius:12px;
width:42px;
height:36px;
font-size:26px;
line-height:15px;
padding-bottom:12px}
.game-layout{
max-width:620px;
margin:0 auto 36px;
padding:0 24px}
.play-area{display:flex;flex-direction:column}
.play-sidebar{display:contents}
.topbar{order:0}
.level-heading{order:1}
.game-stats{order:2}
.board-shell{order:3}
.gesture-help{order:4}
.play-tools{order:5}
.level-nav{order:6}
.level-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:15px}
.eyebrow{
font-size:12px;
color:var(--muted);
margin:0 0 8px}
.level-heading h1{
font-size:26px;
margin:0;
font-weight:730;
letter-spacing:-.025em}
.book-button{
background:#eeedf7;
color:#7d75b9;
padding:10px 15px;
border-radius:12px;
font-size:13px}
.game-stats{
display:flex;
gap:20px;
align-items:center;
font-size:12px;
color:var(--muted);
margin:20px 2px 18px}
.game-stats b{
font-weight:650;
font-size:14px;
color:#7068b6;
font-variant-numeric:tabular-nums}
.found{
margin-left:auto}
.clock{
font-variant-numeric:tabular-nums;
letter-spacing:.025em;
color:#727790}
.board-shell{
position:relative;
border-radius:18px;
background:#eeeef5;
padding:8px;
box-shadow:0 10px 35px #34346408}
.board-viewport{
width:100%;
aspect-ratio:1;
overflow:auto;
scrollbar-width:none;
border-radius:10px;
overscroll-behavior:contain;
position:relative}
.board-viewport::-webkit-scrollbar{
display:none}
.board{
display:grid;
grid-template-columns:repeat(var(--n),1fr);
gap:2px;
width:100%;
touch-action:none;
user-select:none;
align-content:start}
.board.with-coordinates{
grid-template-columns:20px repeat(var(--n),1fr)}
.coordinate{
display:grid;
place-items:center;
font-size:10px;
color:#999bb2;
height:20px;
align-self:center}
.cell{
padding:0;
aspect-ratio:1;
border-radius:4px;
display:grid;
place-items:center;
background:var(--region);
position:relative;
border:0;
touch-action:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
transition:filter .12s}
@media(hover:hover) and (pointer:fine){
.cell:hover{filter:brightness(1.035)}
}
.board .cell:active{transform:none}
.cell .mark{
width:42%;
height:42%;
pointer-events:none}
.mark path{
stroke:#fff;
stroke-width:3.7;
stroke-linecap:round;
fill:none;
opacity:.96}
.cat-svg{
width:97%;
height:97%;
overflow:visible;
pointer-events:none;
filter:drop-shadow(0 2px 1px #75575d28);
transform-origin:50% 70%;
animation:catBreath 4.5s ease-in-out infinite}
.cat-eyes{
transform-box:fill-box;
transform-origin:center;
animation:catBlink 7s infinite}
.has-cat{
z-index:2}
.cat-arriving .cat-svg{
animation:catArrive .48s cubic-bezier(.2,.7,.2,1),catBreath 4.5s .5s ease-in-out infinite}
.cell.confirmed-exclusion .mark{
width:52%;
height:52%;
filter:drop-shadow(0 1px 0 #fffb)}
.confirmed-exclusion .mark path{
stroke:#b82e49;
stroke-width:4.5;
opacity:1}
.exclusion-arriving .mark{
animation:catOops .45s ease-in-out}
.hint-scope:after{
content:"";
position:absolute;
inset:-1px;
border-style:solid;
border-color:#fff;
border-width:var(--hint-top) var(--hint-right) var(--hint-bottom) var(--hint-left);
border-radius:3px;
pointer-events:none;
z-index:3}
.hint-muted{opacity:.38}
.hint-candidate:before{
content:"";
position:absolute;
inset:12%;
border:2px solid #fffc;
border-radius:50%;
pointer-events:none}
.hint-target{
box-shadow:inset 0 0 0 2px white,0 0 0 2px #6f67b0;
z-index:3}
.cell:focus{outline:none}
.board.keyboard-navigation .cell:focus{
outline:3px solid #60579f;
outline-offset:-3px;
z-index:4}
.gesture-help{
text-align:center;
color:#a2a0b5;
font-size:12px;
margin:17px 0 20px}
.play-tools{
display:flex;
justify-content:center;
gap:18px;
align-items:center}
.dock-button{
background:transparent;
color:#9091aa;
min-width:64px;
min-height:60px;
font-size:12px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:4px;
border-radius:16px}
.dock-button>span{
font-size:26px;
font-weight:450;
height:29px;
line-height:29px}
.dock-button:hover{
background:#eeeef7}
.dock-button.hint-button{
background:#8b80ce;
color:white;
min-width:82px;
box-shadow:0 5px 13px #7f6fb42c}
.hint-button>span{
font-size:25px}
.hint-button:hover{
background:#8074c6}
.level-nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:22px 0 0;
color:#a09bb6;
font-size:12px}
.quiet{
background:transparent;
padding:9px 10px;
font-size:13px;
border-radius:10px;
color:#9690b1}
.quiet:hover{
background:#eae9f5}
.level-nav>span{
font-size:11px}
.hint-popover{
position:fixed;
inset:auto 12px 103px;
margin:0 auto;
width:min(390px,calc(100vw - 24px));
padding:24px;
border:0;
border-radius:20px;
background:#fff;
color:var(--ink);
box-shadow:0 12px 60px #34345c2a;
max-height:65vh;
overflow:auto;
z-index:20}
.hint-popover .close{
position:absolute;
right:12px;
top:12px}
.hint-popover h2{
font-size:18px;
line-height:1.6;
margin:0 28px 10px 0}
.hint-popover p{
font-size:14px;
line-height:1.9;
color:#73728d;
margin:0 0 18px}
.method{
display:inline-block;
font-size:11px;
color:#8c7cb8;
margin-bottom:12px}
.hint-actions{display:flex;align-items:center;gap:10px}
.hint-actions .primary{margin-left:auto}
.primary{
background:#887bc7;
color:white;
font-size:14px;
font-weight:650;
padding:12px 19px;
border-radius:11px}
.primary:hover{
background:#796bb9}
.outline{
background:#eeedf7;
color:#79719e;
border:0;
font-size:14px;
padding:11px 16px;
border-radius:11px}
.outline:hover{
background:#e5e2f2}
.full{
width:100%}
.link-button{
background:transparent;
color:#8c83b2;
font-size:13px;
padding:9px 8px}
.close{
background:#f0eef7;
color:#a098b4;
border-radius:50%;
width:30px;
height:30px;
font-size:22px;
line-height:22px}
.failure-panel{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:#f6f4fbd9;
backdrop-filter:blur(4px);
border-radius:18px;
z-index:10}
.failure-content{
text-align:center;
padding:24px}
.failure-symbol{
font-size:12px;
letter-spacing:.12em;
color:#b38a9f}
.failure-content h2{
font-size:22px;
margin:13px 0 9px}
.failure-content p{
font-size:14px;
line-height:1.8;
color:#9890a7;
margin:0 0 21px}
.failure-content .link-button{
display:block;
margin:6px auto 0}
dialog{
border:0;
border-radius:22px;
padding:28px;
width:min(680px,calc(100vw - 28px));
max-height:88vh;
color:var(--ink);
background:#fafafd;
box-shadow:0 24px 100px #38365832}
dialog::backdrop{
background:#423c6555;
backdrop-filter:blur(5px)}
dialog p{
font-size:14px;
line-height:1.9;
color:#9390a6}
.dialog-heading{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px}
.dialog-heading h2{
font-size:22px;
margin:0}
.menu-dialog{
width:min(470px,calc(100vw - 28px))}
.menu-rule{
font-size:16px!important;
color:#74708f!important}
.menu-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin:22px 0}
.coordinates-setting{
display:block;
font-size:13px;
color:#938aa5;
margin:24px 0}
.filters{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:18px}
.check-filter{
display:flex;
align-items:center;
font-size:13px}
.levels-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:13px;
max-height:56vh;
overflow:auto;
padding:2px}
.level-tile{
background:transparent;
text-align:left;
color:#6c647f;
border-radius:12px;
padding:8px}
.level-tile:hover{
background:#f0edf8}
.mini-board{
width:100%;
height:auto;
aspect-ratio:1;
display:block;
border-radius:8px}
.level-tile>strong{
display:block;
font-size:13px;
font-weight:600;
margin-top:9px}
.level-tile>small{
display:block;
font-size:11px;
color:#aaa3b9;
margin-top:5px}
.load-more{
grid-column:1/-1;
background:#eeedf7;
border-radius:10px;
padding:12px;
font-size:13px;
color:#8c80ae}
.dialog-actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:20px}
.input-row{
display:flex;
gap:12px;
margin:16px 0}
.input-row input{
flex:1}
.input-row label{
flex:1;
font-size:14px;
display:grid;
gap:7px}
.input-row select{
width:100%}
select,input:not([type=checkbox]),textarea{
border:1px solid #dedbe9;
background:white;
color:#716781;
border-radius:10px;
padding:10px 11px;
font-size:14px;
min-width:0}
textarea{
width:100%;
font-family:monospace}
label[for]{
font-size:14px;
display:block;
margin-bottom:9px}
input[type=checkbox]{
accent-color:#9181c5;
width:15px;
height:15px;
vertical-align:-3px;
margin-right:5px}
.code-area{
margin:20px 0}
.code-area>div{
display:flex;
gap:4px}
.code-area input{
width:100%}
.code-area small,.small{
font-size:12px!important;
color:#a29bae;
line-height:1.8}
.code-area small{
display:block;
margin-top:10px}
.sync-state{
padding:12px 15px;
background:#efecf6;
border-radius:11px;
font-size:13px;
color:#8c80a9}
.endpoint-label{
margin-top:18px}
hr{
border:0;
height:8px;
margin:16px 0}
.palette{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:18px 0}
.swatch{
width:32px;
height:32px;
border-radius:8px;
background:var(--region);
color:white;
font-size:12px;
box-shadow:inset 0 0 0 2px #fff3}
.swatch.selected{
outline:2px solid #8c81bc;
outline-offset:3px}
.design-board{
display:grid;
grid-template-columns:repeat(var(--n),1fr);
gap:2px;
max-width:470px;
margin:auto;
touch-action:none;
user-select:none}
.design-board button{
aspect-ratio:1;
background:var(--region);
color:#fff;
border:0;
border-radius:2px;
font-size:10px;
touch-action:none}
.design-board button.empty{
background:#e6e1ee}
#design-status{
min-height:25px;
font-size:13px}
details summary{
font-size:13px;
cursor:pointer;
color:#9c8cb5;
padding:8px 0}
.win-icon{
width:82px;
height:82px;
margin:12px auto}
#win-dialog{
text-align:center;
width:min(470px,calc(100vw - 28px))}
#win-dialog h2{
font-size:25px}
#win-dialog .dialog-actions{
justify-content:center}
#toast{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
padding:12px 19px;
background:#79718d;
color:#fff;
border-radius:12px;
z-index:100;
font-size:13px;
max-width:90vw;
text-align:center}
[hidden]{
display:none!important}
.header-actions{display:flex;align-items:center;gap:8px}
.audio-toggle{padding:8px;color:#8e85ae}
.audio-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.audio-toggle .mute-line{display:none;stroke:#b386a2;stroke-width:2.3}
.audio-toggle.is-muted .mute-line{display:block}
.lives{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.lives svg{width:16px;height:16px;fill:#e897aa;transition:fill .2s,transform .2s}
.lives .life-spent{fill:#dddce7;transform:scale(.92)}
.audio-options{display:flex;gap:22px;margin-top:22px;font-size:13px;color:#807791}
.audio-options label{display:flex;align-items:center;gap:4px}
.volume-control{display:flex!important;align-items:center;gap:12px;margin:16px 0 6px;font-size:13px!important;color:#938aa5}
.volume-control input[type=range]{flex:1;min-width:0;padding:0;border:0;background:transparent;accent-color:#9181c5}
.volume-control output{min-width:35px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
@keyframes catArrive{
0%{
transform:translateY(-22%) scale(.45);
opacity:0}
45%{
transform:translateY(4%) scale(1.18,.86);
opacity:1}
70%{
transform:translateY(-9%) scale(.94,1.08)}
100%{
transform:translateY(0) scale(1)}
}
@keyframes catBreath{
0%,100%{
transform:rotate(-1deg) scale(1)}
50%{
transform:rotate(1deg) scale(1.025)}
}
@keyframes catBlink{
0%,44%,48%,100%{
transform:scaleY(1)}
46%{
transform:scaleY(.1)}
}
@keyframes catOops{
0%,100%{
transform:rotate(0)}
20%,60%{
transform:rotate(-12deg)}
40%,80%{
transform:rotate(12deg)}
}
@media(max-width:680px){
.topbar{
padding:15px 0}
.brand{
font-size:16px}
.game-layout{
padding:0 15px;
margin:0 auto 25px;
max-width:510px}
.level-heading h1{
font-size:24px}
.level-heading{
margin-bottom:13px}
.game-stats{
gap:12px;
font-size:11px;
margin:17px 3px 15px}
.game-stats b{
font-size:13px}
.moves-stat{
display:none}
.board-shell{
padding:6px;
border-radius:15px}
.board{
gap:2px}
.cell{
border-radius:3px}
.gesture-help{
font-size:11px;
margin:18px 0 19px}
.play-tools{
gap:15px}
.dock-button{
min-width:58px;
min-height:61px}
.hint-button{
min-width:78px!important}
.level-nav{
margin-top:20px}
.level-nav>span{
font-size:10px}
.hint-popover{
bottom:max(102px,env(safe-area-inset-bottom));
padding:24px 21px}
.filters{
gap:7px}
.filters select{
font-size:12px;
padding:9px 8px}
.levels-list{
gap:7px}
.level-tile{
padding:5px}
.level-tile>strong{
font-size:12px}
.code-area>div{
flex-wrap:wrap}
.code-area input{
flex-basis:100%}
.input-row{
flex-wrap:wrap}
.dialog-actions{
flex-wrap:wrap}
dialog{
padding:23px}
.failure-content h2{
font-size:21px}
}
@media(orientation:landscape){
:root{--workspace-padding:clamp(12px,2vw,24px);--sidebar-width:clamp(180px,24vw,280px);--workspace-gap:clamp(16px,2.5vw,32px);--board-size:min(calc(100dvh - 2 * var(--workspace-padding)),calc(100dvw - 2 * var(--workspace-padding) - var(--sidebar-width) - var(--workspace-gap)));--workspace-width:calc(var(--board-size) + var(--sidebar-width) + var(--workspace-gap))}
.game-layout{width:var(--workspace-width);max-width:none;margin:var(--workspace-padding) auto;padding:0}
.play-area{display:grid;grid-template-columns:var(--board-size) var(--sidebar-width);gap:var(--workspace-gap);align-items:start}
.board-shell{grid-column:1;grid-row:1;width:100%}
.play-sidebar{grid-column:2;grid-row:1;display:flex;flex-direction:column;height:var(--board-size);min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.topbar{max-width:none;padding:0;margin:0 0 30px;gap:10px;flex-wrap:wrap}
.brand{font-size:17px;gap:5px}.brand-icon{font-size:24px}
.icon-button{width:36px;height:34px;font-size:24px}.header-actions{gap:5px}
.level-heading{display:block;margin-bottom:20px}
.level-heading h1{font-size:28px;line-height:1.5;overflow-wrap:anywhere}.eyebrow{font-size:13px}
.book-button{font-size:14px;padding:10px 15px;margin-top:14px}
.game-stats{flex-wrap:wrap;gap:15px;margin:0;font-size:15px;align-items:center}
.game-stats>span:first-child{flex-basis:100%;line-height:1.5}
.game-stats b{font-size:17px}.moves-stat{display:inline}.found{margin-left:0}.clock{font-size:16px}.lives svg{width:19px;height:19px}
.gesture-help{text-align:left;font-size:13px;line-height:1.9;margin:24px 0 18px}
.play-tools{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.dock-button{min-width:0;min-height:0;height:68px;font-size:15px}.hint-button{min-width:0!important}
.level-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin: auto 0 0;padding-top:10px}
.level-nav>span{grid-column:1/-1;grid-row:1;font-size:13px;text-align:center}
.level-nav button{font-size:15px;padding:10px 0}
.hint-popover{inset:clamp(18px,24dvh,220px) auto auto calc((100dvw - var(--workspace-width))/2 + var(--board-size) + var(--workspace-gap));margin:0;width:var(--sidebar-width);padding:22px;max-height:calc(100dvh - clamp(18px,24dvh,220px) - 18px)}
.hint-popover p{font-size:16px}.hint-popover h2{font-size:20px}.method{font-size:12px}
.hint-popover .primary{font-size:15px;padding:11px 12px}.hint-actions{gap:4px}.hint-actions .quiet{font-size:13px;padding:9px 5px}
}
@media(orientation:landscape) and (max-height:560px){
.topbar{margin-bottom:14px}.level-heading{margin-bottom:14px}.level-heading h1{font-size:22px}
.book-button{margin-top:8px;padding:8px 12px}.game-stats{font-size:12px;gap:10px}.game-stats b{font-size:14px}
.gesture-help{margin:14px 0 12px;font-size:11px}.play-tools{gap:10px;margin-bottom:12px}.dock-button{height:54px;font-size:13px}
.level-nav{gap:8px}.level-nav button{font-size:13px}.level-nav>span{font-size:11px}
.hint-popover{padding:18px}.hint-popover p{font-size:14px}.hint-popover h2{font-size:18px}.hint-popover .primary{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
}