:root{--bg:#17142c;--card:#262140;--pink:#ff5b8d;--gold:#ffc857;--text:#fff;--muted:#aaa5bd;--size:min(calc((100vw - 86px)/7),54px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#4b356c 0,#201a3b 35%,var(--bg) 70%);color:var(--text);font-family:ui-rounded,"PingFang SC","Microsoft YaHei",sans-serif}body{display:grid;place-items:center;overflow-x:hidden}.app{width:min(100%,480px);min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 14px}h1,h2,p{margin:0}h1{font-size:26px;letter-spacing:1px;margin-top:3px}.eyebrow{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:2px}.icon-btn{width:46px;height:46px;border:1px solid #ffffff22;background:#ffffff12;border-radius:16px;font-size:22px}.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.stats>div{background:#ffffff0c;border:1px solid #ffffff10;padding:10px;border-radius:15px;text-align:center}.stats span{display:block;color:var(--muted);font-size:11px}.stats strong{font-size:21px}.timer strong{color:var(--gold)}.progress{height:5px;margin:9px 4px 18px;background:#ffffff10;border-radius:5px;overflow:hidden}.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--gold));transition:width .3s linear}.game-shell{position:relative;margin:auto}.board{display:grid;grid-template-columns:repeat(7,var(--size));grid-template-rows:repeat(7,var(--size));gap:5px;padding:9px;background:#100e22aa;border:1px solid #ffffff18;border-radius:22px;box-shadow:0 24px 70px #0007}.tile{border:0;padding:0;border-radius:16px;overflow:hidden;background:#3b3457;box-shadow:inset 0 0 0 2px #ffffff20,0 3px 5px #0005;touch-action:manipulation;transition:transform .16s,opacity .16s,filter .16s}.tile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.tile[data-kind="0"] img{object-position:50% 28%}.tile[data-kind="1"] img{object-position:50% 22%}.tile[data-kind="2"] img{object-position:50% 35%}.tile[data-kind="3"] img{object-position:50% 34%}.tile[data-kind="4"] img{object-position:50% 33%}.tile[data-kind="5"] img{object-position:50% 45%}.tile[data-kind="6"] img{object-position:50% 30%}.tile.selected{transform:scale(.88);box-shadow:inset 0 0 0 4px var(--gold),0 0 16px var(--gold)}.tile.pop{transform:scale(.1) rotate(20deg);opacity:0;filter:brightness(2)}.toast{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) scale(.8);font-size:28px;font-weight:900;color:var(--gold);text-shadow:0 3px 9px #000;opacity:0;pointer-events:none}.toast.show{animation:toast .7s}@keyframes toast{30%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}.tip{text-align:center;color:var(--muted);font-size:12px;margin:17px 0 13px}.primary{width:100%;border:0;border-radius:16px;padding:15px;color:#fff;background:linear-gradient(135deg,#ff467d,#ff785d);font-size:16px;font-weight:800;box-shadow:0 9px 25px #ff467d33}.primary:active{transform:scale(.98)}dialog{border:0;padding:0;background:transparent;color:inherit;width:min(calc(100% - 36px),420px)}dialog::backdrop{background:#090715cc;backdrop-filter:blur(8px)}.dialog-card{position:relative;text-align:center;background:linear-gradient(160deg,#322a51,#201b38);border:1px solid #ffffff1c;border-radius:27px;padding:30px 24px;box-shadow:0 30px 80px #0009}.dialog-card h2{font-size:28px;margin:7px 0 10px}.dialog-card p{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:22px}.mini-faces{display:flex;justify-content:center;margin:0 0 20px}.mini-faces img{width:64px;height:64px;object-fit:cover;border-radius:50%;border:4px solid #332b50;margin:0 -7px}.mini-faces img:first-child{object-position:50% 22%;transform:rotate(-8deg)}.mini-faces img:last-child{object-position:50% 28%;transform:rotate(8deg)}.text-btn{border:0;background:none;color:var(--muted);padding:14px;font-size:14px}.final-score{margin:16px 0;background:#ffffff0c;padding:16px;border-radius:18px}.final-score span{display:block;color:var(--muted);font-size:12px}.final-score strong{font-size:42px;color:var(--gold)}label{display:block;text-align:left;color:var(--muted);font-size:12px;margin:14px 0 20px}input{width:100%;margin-top:7px;border:1px solid #ffffff1f;background:#17132b;color:#fff;border-radius:13px;padding:13px;font-size:16px;outline:none}input:focus{border-color:var(--pink)}.close{position:absolute;right:15px;top:13px;border:0;background:none;color:#aaa;font-size:28px}.rank-card ol{list-style:none;padding:0;margin:20px 0}.rank-card li{display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;padding:12px;border-bottom:1px solid #ffffff12}.rank-card li:first-child .place{color:var(--gold)}.rank-card .place{font-weight:900}.rank-card .rank-name{font-weight:700}.rank-card .rank-score{color:var(--gold);font-variant-numeric:tabular-nums}.rank-note{font-size:11px!important;margin:0!important}.empty{display:block!important;text-align:center!important;color:var(--muted);border:0!important;padding:30px!important}@media(max-width:360px){.board{gap:4px;padding:7px}.app{padding-left:10px;padding-right:10px}}