:root{--ink:#291a24;--muted:#806572;--pink:#ff6f9e;--cream:#fffaf5;--line:#ead9df}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 6%,#fff 0 9%,transparent 28%),linear-gradient(145deg,#fff8ed,#ffeaf3 48%,#f6ecff)}
body{overscroll-behavior:none}.shell{width:min(100%,540px);margin:auto;min-height:100vh;padding:18px 16px 24px}.topbar,.hud{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center}.brand small{display:block;color:#ae7188;font-size:11px;letter-spacing:2px}.brand h1{margin:1px 0 0;font-size:20px;letter-spacing:.5px}.spark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:#282027;color:#ffd86b;box-shadow:0 7px 18px #aa70875c}.icon-btn{width:40px;height:40px;border:1px solid #fff;border-radius:14px;background:#ffffffa6;color:#8d5f76;font-size:20px;box-shadow:0 5px 18px #ab7b8e2b}.icon-btn.off{opacity:.45;text-decoration:line-through}
.hud{gap:9px;margin:16px 0 12px}.hud>div{height:62px;background:#ffffffb8;border:1px solid #fff;border-radius:18px;box-shadow:0 8px 24px #a36d8420;display:flex;flex-direction:column;justify-content:center;padding:8px 14px}.hud span{color:var(--muted);font-size:10px}.hud strong{font-size:20px;line-height:1}.score-card,.best-card{flex:1}.best-card{text-align:right}.next-card{min-width:88px;align-items:center}.mini-ball{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;background:linear-gradient(145deg,#ff9eb7,#ff5c8f);box-shadow:inset -3px -4px 6px #b9195455}
.game-wrap{position:relative;overflow:hidden;border:5px solid #fff;border-radius:28px;background:linear-gradient(#fffafd,#fff1f5);box-shadow:0 18px 48px #84576c32}canvas{display:block;width:100%;height:auto;aspect-ratio:680/660;touch-action:none}.danger-line{position:absolute;z-index:2;top:18%;left:0;right:0;border-top:1px dashed #ee9bb4;pointer-events:none}.danger-line span{position:absolute;right:8px;top:-17px;font-size:9px;color:#cf7c95}.drop-line{position:absolute;z-index:2;top:0;bottom:0;left:50%;border-left:1px dashed #d9a7b7;pointer-events:none}.combo-toast{position:absolute;z-index:5;top:25%;left:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;color:#fff;font-weight:900;font-size:28px;letter-spacing:1px;text-shadow:0 3px 12px #e43879;background:linear-gradient(110deg,#ff6597,#ffb64f);padding:7px 18px;border-radius:999px;box-shadow:0 8px 28px #d8508459}.combo-toast.show{animation:comboPop .72s ease-out}@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-25%) scale(.55)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-58%) scale(1)}100%{opacity:0;transform:translate(-50%,-85%) scale(.9)}}
.overlay{position:absolute;z-index:8;inset:0;display:none;place-items:center;padding:28px;background:linear-gradient(#fff8fbdd,#ffe9f2ed);backdrop-filter:blur(5px)}.overlay.show{display:grid}.panel{text-align:center;background:#fffdfbe8;border:1px solid white;border-radius:28px;padding:32px 24px;width:min(100%,390px);box-shadow:0 22px 60px #8b526838}.panel.compact{padding:30px 24px}.duo-photo{width:110px;height:110px;margin:auto;padding:4px;border-radius:50%;background:linear-gradient(135deg,#ff7aa6,#ffe170);box-shadow:0 9px 22px #69415343}.duo-photo img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;object-position:50% 35%}.eyebrow{font-size:10px!important;letter-spacing:3px;color:#c16d8c!important;margin-top:20px!important}.panel h2{font-size:25px;margin:6px 0 10px}.panel p{color:#7d6570;font-size:13px;line-height:1.7;margin:0 0 20px}.panel h2 span{color:#f04f86}.primary{border:0;color:white;background:linear-gradient(100deg,#2e2530,#ff6295);font:700 15px inherit;border-radius:16px;padding:14px 22px;min-width:180px;box-shadow:0 9px 22px #d65b874d}.primary span{margin-left:16px}
footer{margin-top:14px}footer p{font-size:11px;color:#9b7487;margin:0 0 8px 4px}.legend{display:flex;align-items:flex-end;justify-content:space-between;gap:3px;padding:10px 12px;border-radius:18px;background:#ffffff85}.legend-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.legend-dot{display:block;border-radius:50%;object-fit:cover;border:1px solid #fff;box-shadow:0 2px 6px #5b314b35}.legend-item span:last-child{font-size:8px;color:#9a7183;white-space:nowrap}
@media(max-width:380px){.shell{padding:10px}.brand h1{font-size:17px}.hud>div{padding:7px 9px}.game-wrap{border-width:4px;border-radius:23px}.panel{padding:25px 18px}.legend{padding:8px 6px}}
@media(min-height:900px) and (min-width:500px){.shell{padding-top:28px}}