@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;600;700;800;900&family=Nunito:wght@600;700;800;900;1000&display=swap');
:root{font-family:'Nunito','Noto Sans SC',system-ui,sans-serif;color:#462f2b;background:#f7f1e7;font-synthesis:none;--green:#355b48;--pink:#d7949d}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 10% 8%,#ffe6e880,transparent 42%),radial-gradient(ellipse at 90% 85%,#cbdacc60,transparent 45%),#f7f1e7}body:before{content:'';position:fixed;inset:0;background:linear-gradient(#fbf5ebd9,#faf4e9f0),url('../street.jpg') center/cover;z-index:-1;pointer-events:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #cb8b67;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.shell{width:min(100%,510px);margin:auto;padding:23px 22px 16px}.topline{display:flex;justify-content:space-between;align-items:center}.brand{display:grid;grid-template-columns:33px auto;grid-template-rows:auto auto;align-items:center;column-gap:7px;color:#3e4b3c;text-decoration:none;font-weight:1000;font-size:17px;letter-spacing:.7px;line-height:1.1}.brand img{grid-row:span 2;width:33px;mix-blend-mode:multiply}.brand span{font-size:7px;letter-spacing:3.1px;font-weight:800;margin-top:4px}.prefs{display:flex;gap:7px}.prefs button{border:1px solid #d8cdbf;background:#fff9f0b0;min-width:34px;height:34px;border-radius:50%;font-size:11px;font-weight:900}.prefs #sound{font-size:19px}.prefs #sound[aria-pressed=false]{color:#aaa;text-decoration:line-through}header{margin:27px 0 22px;text-align:center}.eyebrow{font-size:8px;letter-spacing:3px;color:#a38b76;font-weight:900}h1{font-size:37px;letter-spacing:-1.5px;font-weight:900;margin:7px 0 6px;line-height:1.25;color:#365b46}h1 span{color:#ca8893}h1 i{font-size:19px;display:inline-block;vertical-align:top;margin:0 0 0 4px;font-style:normal;color:#dba555;transform:rotate(10deg)}header p{font-size:11px;color:#9a8175;letter-spacing:.8px;margin:0}.game-card{background:#fffcf5;border:1px solid #fff;border-radius:27px;padding:18px 14px 11px;box-shadow:0 9px 30px #775e3d13,0 1px 0 #dbcfbe}.stats{display:flex;text-align:center;align-items:center;padding:0 5px 11px}.stats>div{flex:1}.stats small{display:block;font-size:9px;color:#a18c7b;letter-spacing:1px}.stats strong{display:block;font-size:29px;font-weight:1000;line-height:1.25;color:#3c5b46}.stats .level strong{font-size:23px;color:#af8d71}.stats .moves strong{color:#c47f8b}.score-stat{border-left:1px solid #ece2d6;border-right:1px solid #ece2d6}.goal-row{display:flex;justify-content:space-between;font-size:9px;font-weight:800;color:#a08770;margin:0 7px 7px}.meter{height:5px;background:#ece8da;border-radius:8px;position:relative;margin:0 7px 19px}.meter div{height:100%;background:linear-gradient(90deg,#8ba78b,#3c6550);width:0%;border-radius:8px;transition:width .4s}.meter>span{position:absolute;right:-3px;top:-8px;font-size:17px;color:#d5a557;text-shadow:0 1px white}.board-wrap{position:relative}#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:7px;background:#eadfce;border:1px solid #dfd0bc;border-radius:17px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 2px 5px #6a492317}.tile{aspect-ratio:1;display:grid;place-items:center;position:relative;min-width:0;border:0;border-radius:10px;padding:0;background:linear-gradient(#fffdf6,#f6ebd9);box-shadow:0 2px 0 #cbb99e;transition:transform .14s,background .14s,box-shadow .14s;overflow:visible}.tile:nth-child(16n+2),.tile:nth-child(16n+4),.tile:nth-child(16n+6),.tile:nth-child(16n+8),.tile:nth-child(16n+9),.tile:nth-child(16n+11),.tile:nth-child(16n+13),.tile:nth-child(16n+15){background:linear-gradient(#f9f3e8,#eee2ce)}.tile canvas{display:block;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.tile.selected{z-index:2;box-shadow:0 0 0 2px #fff,0 0 0 4px #ce9b4d;transform:scale(1.035);background:#fff2cb}.tile.hinted{animation:hint 1.25s ease-in-out infinite}.tile.pop{animation:pop .26s forwards;pointer-events:none}.tile.dropping canvas{animation:fall .3s cubic-bezier(.18,.7,.3,1) both}.tile.shake{animation:shake .25s}.tile.swapping{z-index:4;transition:transform .18s ease-in-out}.tile:disabled{opacity:1}#status{min-height:32px;text-align:center;padding:12px 0 5px;font-size:10px;color:#a18a77;letter-spacing:.4px}.tools{display:flex;gap:8px;margin:3px 2px 0}.tools button{flex:1;border:0;background:transparent;border-radius:12px;padding:6px 2px;display:flex;gap:5px;align-items:center;justify-content:center;font-size:11px;color:#6f7c62}.tools button span{font-size:20px;font-weight:700;line-height:1}.tools button b{font-weight:700}.tools button small{border-radius:50%;min-width:15px;height:15px;line-height:15px;background:#e8e9db;font-size:8px}.tools button:hover{background:#f0eee2}.how{display:flex;gap:9px;justify-content:center;align-items:center;margin:19px -8px 21px;font-size:8px;color:#c09c85;letter-spacing:.5px}.how b{font-weight:600;color:#968373;margin-left:4px}.how i{color:#c6b8a7}footer{display:flex;justify-content:space-between;align-items:center;color:#b4a18d;font-size:6px;letter-spacing:1.2px}footer a{color:#79886b;text-decoration:none;font-size:9px;letter-spacing:0}#celebrate{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:8;font-size:32px;font-weight:1000;color:white;text-shadow:0 3px 0 #ba7b67,0 0 15px #965b51;opacity:0}#celebrate.show{animation:cheer .9s both}#effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:17px;z-index:9}.spark{position:absolute;color:#e8ad45;font-size:15px;animation:spark .6s ease-out forwards}#modal{position:fixed;inset:0;background:#263d344d;backdrop-filter:blur(7px);z-index:20;display:grid;place-items:center;padding:22px}.modal-card{width:min(100%,350px);background:#fffcf3;border:2px solid white;border-radius:29px;padding:27px;text-align:center;box-shadow:0 15px 60px #293b3629}.modal-card #modal-icon{font-size:48px;color:#d6a04b;line-height:1.2;margin-bottom:12px}.modal-card>span{font-size:8px;letter-spacing:3px;color:#ae9174;font-weight:900}.modal-card h2{font-size:24px;letter-spacing:-.5px;color:#3a5a45;margin:10px 0}.modal-card p{font-size:11px;color:#a18a77;line-height:1.8}.modal-score{margin:20px auto;color:#9b8978}.modal-score small{display:block;font-size:10px}.modal-score strong{display:block;font-size:42px;font-weight:1000;color:#365b46}.primary{border:0;border-radius:15px;width:100%;background:#3d624d;color:#fff8ed;min-height:48px;font-size:14px;font-weight:900;box-shadow:0 4px 0 #294733}.secondary{background:none;border:0;font-size:12px;color:#927d68;margin-top:16px;padding:7px}@keyframes pop{40%{transform:scale(1.18);filter:brightness(1.15)}100%{transform:scale(.1);opacity:0}}@keyframes fall{from{transform:translateY(var(--fall,-50px));opacity:.4}to{transform:translateY(0);opacity:1}}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes hint{50%{box-shadow:0 0 0 2px #c59954;transform:scale(1.045)}}@keyframes cheer{0%{opacity:0;transform:scale(.6)}22%{opacity:1;transform:scale(1.04)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-20px)}}@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(90deg);opacity:0}}@media(min-width:700px){.shell{padding-top:35px}header{margin-top:34px}.game-card{padding:22px 19px 14px}}@media(max-width:370px){.shell{padding:17px 13px 12px}header{margin:20px 0 17px}h1{font-size:32px}#board{gap:3px;padding:6px}.game-card{padding:15px 11px 9px}.how{gap:6px;font-size:7px}.tile{border-radius:8px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}