*{box-sizing:border-box}body{margin:0;background:#edf1f7;color:#182e48;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}button{font:inherit;cursor:pointer;border:0;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #e77d22;outline-offset:3px}main{max-width:520px;margin:auto;padding:22px 22px 16px}header{display:flex;align-items:center;justify-content:space-between}.brand{font-size:12px;font-weight:900;letter-spacing:3px}.small{padding:9px 14px;border-radius:20px;background:white;font-size:14px}.small span{margin-left:10px}.heading{display:flex;align-items:center;justify-content:space-between;margin:22px 0 17px}.heading p{margin:0 0 5px;font-size:14px;color:#597087}h1{font-size:35px;line-height:1.2;letter-spacing:-2px;margin:0;font-weight:950}h1 span{color:#ec7228}.badge{display:flex;flex-direction:column;text-align:center;border-left:1px solid #ccd5df;padding-left:20px}.badge b{font-size:34px;line-height:1.1}.badge small{font-size:12px;color:#60768a}.status{display:flex;justify-content:space-between;font-size:14px;gap:8px}.progress{height:5px;background:#d9e0e9;border-radius:10px;margin:10px 0 21px;overflow:hidden}.progress i{display:block;background:#ef8a3b;height:100%;width:0;transition:width .3s}.case{background:#233b56;border-radius:27px;padding:18px;box-shadow:0 8px 0 #14293f,0 18px 28px #182e481b;position:relative}.case:before{content:"";width:70px;height:9px;border-radius:8px 8px 0 0;background:#233b56;position:absolute;top:-8px;left:calc(50% - 35px)}#board{width:100%;display:block;touch-action:none;border-radius:10px}#message{font-size:14px;min-height:22px;margin:20px 0 12px;text-align:center;color:#536a80}.toolbar{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;gap:7px}.toolbar button{background:white;border-radius:12px;min-height:46px;font-size:20px}.toolbar span{font-size:13px}.toolbar button:first-child{background:#182e48;color:white}.toolbar button:disabled{opacity:.4;cursor:default}.shelf{margin-top:22px}.shelf-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.shelf-title b{font-size:15px}.shelf-title span{font-size:12px;color:#64778b}#tray{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.piece{background:#fff;border-radius:13px;padding:8px 4px 6px;border:2px solid transparent;touch-action:none;min-width:0}.piece.active{border-color:#ec7228;background:#fff7ee}.piece canvas{display:block;width:100%;height:62px;pointer-events:none}.piece span{font-size:12px;display:block;margin-top:3px}.piece.packed{opacity:.42;background:#e0e7ef}.piece.packed span:before{content:'✓ '}.empty{grid-column:1/-1;text-align:center}footer{display:flex;justify-content:space-between;font-size:12px;color:#718297;margin-top:23px}dialog{border:0;border-radius:25px;padding:28px;width:min(88vw,400px);color:#182e48;text-align:center;box-shadow:0 20px 90px #0c21384d}dialog::backdrop{background:#122942aa;backdrop-filter:blur(5px)}dialog h2{font-size:27px;margin:12px 0}dialog p{font-size:15px;color:#627286;line-height:1.7}dialog button{padding:14px 20px;border-radius:13px;margin-top:10px;width:100%;background:#edf1f7}.primary{background:#ec7228;color:white!important;font-weight:800}.win-icon{font-size:65px;color:#ee9b30}#levelgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}#levelgrid button{padding:14px 0}#levelgrid .done{background:#d7eedf}@media(min-width:760px){main{padding-top:35px}.heading{margin-top:27px}body{background:radial-gradient(circle at 20% 30%,#dae5f1,transparent 40%),#edf1f7}}@media(max-width:370px){main{padding:16px}.heading{margin-top:16px}h1{font-size:30px}.case{padding:13px}.toolbar span{font-size:12px}.shelf-title span{font-size:11px}}

/* The first box is the cat-art pilot. Other nine levels keep original geometry. */
body{background:#f6ead4;color:#533927}body.cat-level{background:radial-gradient(ellipse at top,#fff7e8,#f4e3c5)}
.heading{margin-bottom:10px}h1{font-size:34px;color:#533927}h1 span{color:#cd6b38}#story{font-size:14px;line-height:1.6;color:#806448;margin:0 0 16px}.brand{color:#8b6947;letter-spacing:2px}.badge{border-color:#dfc6a4}.badge small,.heading p{color:#82684d}
.cat-level .case{border:2px solid #a97843;border-radius:16px;background:#c39159;box-shadow:0 7px 0 #9f6d39,0 15px 28px #795b3620}.cat-level .case:before{display:none}.cat-level #board{border-radius:6px}.cat-level .progress{background:#e4ccaa}.cat-level .progress i{background:#c57b43}.toolbar button:first-child{background:#684b36}.piece.active{border-color:#c57b43}.piece.packed{opacity:.62}.skin-toggle{font-size:14px;color:#8a542d;background:#ead6b6;border-radius:16px;padding:7px 12px}.skin-toggle[hidden]{display:none}#message{color:#745a43}.win-icon{font-size:42px;font-weight:900;color:#ac814d;letter-spacing:5px}.primary{background:#bd6d36}.status{color:#684b36}footer{color:#866e54;gap:12px}dialog{color:#533927}.shelf-title b{font-size:16px}@media(max-width:370px){h1{font-size:30px}.heading{margin-top:15px}#story{font-size:13px}}

#winCats{display:block;width:100%;height:auto;margin:12px 0}#winCats[hidden]{display:none}

.cat-actions{display:flex;gap:6px}.cat-actions .skin-toggle{font-size:13px;padding:7px 10px}.skin-toggle:disabled{opacity:.45}.piece canvas{height:88px}.piece span{font-size:13px}#catNameInput{display:block;width:100%;border:1px solid #cfae86;border-radius:10px;padding:12px;font:inherit;font-size:18px;margin:12px 0}#nameForm label{font-size:15px}#tray{grid-template-columns:repeat(3,1fr)}

.art-status{width:100%;padding:12px;background:#f0dab8;color:#725238;border-radius:12px;font-size:14px;margin-bottom:12px}.art-status[hidden]{display:none}.art-loading .piece canvas{visibility:hidden}

/* Keep mobile controls on one line and distinguish selected cats clearly. */
.toolbar{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:6px}.toolbar button{display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 5px;white-space:nowrap;font-size:18px;min-width:0}.toolbar span{font-size:13px;white-space:nowrap}.piece{transition:border-color .15s,background-color .15s}.piece.active{background:#fff3d9;box-shadow:0 0 0 2px #c57b4328}.cat-actions{flex-wrap:wrap;justify-content:flex-end}.heading>div:first-child{min-width:0}h1{letter-spacing:-1px}@media(max-width:370px){.toolbar button{gap:2px;font-size:16px}.toolbar span{font-size:12px}}
