:root{--ink:#654b2e;--cream:#fffdf4;--milk:#fffaf0;--mint:#d8efbd;--green:#9fce7f;--dragon:#f4d783}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100vh;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#fffdf7}button{font:inherit;color:inherit;cursor:pointer}.world{width:min(100%,520px);min-height:100vh;margin:auto;overflow:hidden;position:relative;padding:16px 16px max(22px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% -10%,#fffef7 0,#fff8df 48%,#f3edc9 100%)}.world:before,.world:after{content:"";position:absolute;border-radius:50%;opacity:.28;pointer-events:none}.world:before{width:370px;height:370px;left:-145px;top:230px;border:1px solid #c3dc8e;box-shadow:0 0 0 35px #d8efbd44,0 0 0 73px #f4d78333}.world:after{width:410px;height:150px;right:-115px;bottom:110px;background:#e7f3b9;filter:blur(80px)}
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;color:#654b2e}.brand{letter-spacing:.12em;font-weight:900;font-size:21px;text-shadow:0 2px 8px #9b7c3b3b}.brand small{display:block;margin-top:2px;color:#a48a52;font-size:10px;letter-spacing:.22em}.level-pill{border:1px solid #d4b75d;border-radius:999px;padding:8px 11px;background:#fff9df;font-size:12px;font-weight:800;box-shadow:0 3px 0 #c6a95d55}.mission{position:relative;z-index:2;margin:17px 0 12px;padding:13px 15px;display:flex;align-items:center;gap:12px;border:1px solid #e0c875;border-radius:19px;color:#654b2e;background:linear-gradient(115deg,#fffdf3 0 18%,#e5f2c9 18% 100%);box-shadow:0 10px 22px #9c7b3b2b}.moon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff0a9;color:#6d542e;box-shadow:inset -6px -5px #e3c96e;font-size:21px}.mission strong{display:block;color:#6a843f;font-size:14px}.mission span{display:block;margin-top:2px;color:#967746;font-size:11px}.counter{margin-left:auto;padding:5px 8px;border-radius:11px;color:#715226;background:#fffdf0;font-weight:900;font-size:15px}
.lake{position:relative;z-index:1;min-height:390px;padding:13px;border:1px solid #d8c879;border-radius:30px;background:linear-gradient(150deg,#f9f5d8,#e9efbd 48%,#cfe3a0);box-shadow:inset 0 3px 0 #fffef2,inset 0 -20px 34px #a1bd6c55,0 16px 30px #8d713930}.lake:before{content:"";position:absolute;inset:9px;border:1px dashed #b6c979;border-radius:23px;pointer-events:none}.board{position:relative;z-index:1;width:100%;height:360px}.reed{position:absolute;z-index:0;color:#739346;font-size:25px;opacity:.8}.reed.r1{left:5px;bottom:2px}.reed.r2{right:7px;top:8px;transform:rotate(180deg)}.tile{position:absolute;width:64px;height:76px;padding:4px;border:0;border-radius:19px 19px 25px 25px;background:linear-gradient(145deg,#fffef7,#f2efd2);box-shadow:0 5px 0 #b5a45a,0 9px 14px #866d3238;transition:transform .2s ease,filter .2s ease,opacity .18s ease}.tile:not(.covered):hover{transform:translateY(-4px) rotate(-1deg)!important}.tile.covered{filter:brightness(.78) saturate(.55);cursor:not-allowed}.tile.hinted{animation:glow .75s ease-in-out 3}@keyframes glow{50%{filter:drop-shadow(0 0 10px #f1cc54);transform:translateY(-8px) scale(1.06)!important}}.face{height:100%;display:grid;place-items:center;overflow:hidden;border-radius:15px 15px 21px 21px;background:linear-gradient(140deg,#f9f7dd,#d9edb9);border:1px solid #fff}.face img{width:90%;height:90%;object-fit:cover;object-position:center;border-radius:13px 13px 18px 18px;mix-blend-mode:multiply}.tile:after{content:"";position:absolute;top:8px;left:9px;width:18px;height:7px;border-radius:50%;background:#fff;opacity:.65;transform:rotate(-25deg)}
.tray-label{position:relative;z-index:2;margin:14px 5px 8px;color:#7d7543;font-size:12px;font-weight:800;letter-spacing:.1em}.tray{position:relative;z-index:2;min-height:72px;padding:7px;display:flex;gap:6px;align-items:center;border-radius:20px;background:#fffef2;border:1px solid #d4c67e;box-shadow:inset 0 2px 8px #a5904a30}.slot{width:calc((100% - 36px)/7);aspect-ratio:1;flex:none;display:grid;place-items:center;border:1px dashed #c9bd77;border-radius:13px;color:#c4b66e;font-size:17px}.tray-card{width:calc((100% - 36px)/7);aspect-ratio:1;flex:none;overflow:hidden;border-radius:13px;border:2px solid #fff;background:#e7f0bf;box-shadow:0 3px 0 #b5a45a;animation:arrive .22s ease}@keyframes arrive{from{transform:translateY(-24px) scale(.7)}to{transform:none}}.tray-card img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.tools{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}.tool{min-height:72px;padding:7px 3px;border:1px solid #d9c670;border-radius:17px;background:linear-gradient(#fffef4,#e4efbf);box-shadow:0 4px 0 #b6a054,0 8px 13px #8b72302b}.tool:disabled{filter:grayscale(1);opacity:.48;cursor:not-allowed}.tool:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #b6a054}.tool i{display:block;font-style:normal;font-size:23px}.tool b{display:block;margin-top:3px;font-size:11px}.tool em{font-style:normal;color:#93804a;font-size:10px}.rule{position:relative;z-index:2;margin:15px 5px 0;text-align:center;color:#998554;font-size:11px;line-height:1.6}.toast{position:fixed;z-index:10;left:50%;top:16px;transform:translate(-50%,-140px);padding:10px 16px;border-radius:999px;background:#fffdf0;color:#654b2e;box-shadow:0 6px 18px #80622b45;font-size:13px;font-weight:800;transition:transform .25s}.toast.show{transform:translate(-50%,0)}.overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#65552b66;backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.dialog{width:min(350px,100%);padding:28px 24px 21px;text-align:center;border:1px solid #fff;border-radius:29px;background:linear-gradient(160deg,#fffef4,#e2efbf);box-shadow:0 24px 50px #65532b4d}.dialog .big{font-size:52px}.dialog h2{margin:7px 0;color:#6c803f}.dialog p{margin:0 0 18px;color:#8b7649;font-size:13px;line-height:1.6}.dialog button{width:100%;padding:12px;border:0;border-radius:14px;background:#91b861;color:#fffef4;font-weight:900;box-shadow:0 4px 0 #708e48}@media(max-width:370px){.world{padding-left:10px;padding-right:10px}.lake{padding:8px}.tile{width:58px;height:69px}.board{height:340px}.tool b{font-size:10px}}
.tile.moving{z-index:20!important;pointer-events:none!important;transform:none!important;opacity:1!important;transition:none!important}.tile.moving.traveling{transform:translate3d(var(--move-x),var(--move-y),0)!important;transition:transform .45s linear!important}.tile:not(.covered):hover{transform:none!important}.tray-card{animation:none!important}
.world{background:linear-gradient(180deg,#fffefa 0%,#fff9e8 100%)}.world:before{border-color:#ead58b;box-shadow:0 0 0 35px #f5e5a644,0 0 0 73px #fff4c433}.world:after{background:#f7df8c}.mission{border-color:#e6cf75;background:linear-gradient(115deg,#fffefa 0 18%,#fff4c9 18% 100%);box-shadow:0 10px 22px #a88a4030}.mission strong{color:#8a6826}.mission span{color:#9a7d42}.lake{border-color:#e4c961;background:linear-gradient(150deg,#fffef8,#fff7d5 48%,#f0d783);box-shadow:inset 0 3px 0 #fff,inset 0 -20px 34px #c59c3b30,0 16px 30px #a88a4030}.lake:before{border-color:#e6ce76}.reed{color:#b69238}.face{background:linear-gradient(140deg,#fffef7,#fff4c8)}.tray-label{color:#896a2f}.tray{background:#fffdf4;border-color:#dfc76c;box-shadow:inset 0 2px 8px #b3944130}.slot{border-color:#dfc875;color:#c8a84f}.tray-card{background:#fff4c6;box-shadow:0 3px 0 #c3a344}.tools{grid-template-columns:repeat(3,1fr)}.tool{border-color:#dfc86f;background:linear-gradient(#fffef8,#fff1bd);box-shadow:0 4px 0 #c1a245,0 8px 13px #a4863826}.tool:active:not(:disabled){box-shadow:0 1px 0 #c1a245}.tool em{color:#9a7b36}.rule{color:#9a7b3b}.dialog{background:linear-gradient(160deg,#fffef8,#fff1c1);box-shadow:0 24px 50px #8f71334d}.dialog h2{color:#8a6826}.dialog p{color:#967a42}.dialog button{background:#d7ae45;box-shadow:0 4px 0 #a47c22}.toast{background:#fffbea;color:#765a24}
.tile.moving.traveling{transform:translate3d(var(--move-x),var(--move-y),0)!important;transition:transform .45s linear!important}.tile.covered{cursor:pointer}
.lake:has(.tile.moving){z-index:8}.tile.moving{z-index:9999!important}
.site-footer{position:relative;z-index:2;padding:18px 0 2px;text-align:center}.site-footer a{color:#9a7b3b;font-size:12px;font-weight:800;text-decoration:none}.site-footer a:hover{text-decoration:underline}