:root { --ink:#2e2a32; --muted:#857d84; --paper:#fffdfa; --line:#eee4dc; --accent:#e67251; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; background:radial-gradient(circle at 4% 1%,#ffe2b7 0,transparent 25%),radial-gradient(circle at 96% 8%,#d9d4ff 0,transparent 28%),#f6efe5; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; } .app { width:min(620px,100%); min-height:100svh; margin:auto; padding:15px 16px 34px; }
.topbar { display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:9px; font-weight:900; letter-spacing:.02em; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#fff; font-size:23px; background:#e67251; box-shadow:0 5px 12px #e6725144; } .round-button { width:38px; height:38px; border:1px solid #eee5e0; border-radius:13px; color:#69616a; background:#fffdfa; }
.intro { padding:25px 5px 19px; } .eyebrow { color:#d0664b; font-size:10px; font-weight:900; letter-spacing:.16em; } h1 { margin:7px 0 10px; font-size:clamp(31px,9vw,46px); line-height:1.03; letter-spacing:-.065em; } h1 em { color:#df704e; font-style:normal; } .intro p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.game-card { overflow:hidden; border:1px solid #eee4dc; border-radius:25px; background:var(--paper); box-shadow:0 16px 35px #80655116; } .game-head,.game-foot { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; } .game-head { border-bottom:1px solid #f1eae5; } .mini-label,.moves span { display:block; color:#968b89; font-size:10px; font-weight:800; letter-spacing:.08em; } .game-head strong { display:block; margin-top:3px; font-size:16px; } .moves { display:flex; align-items:baseline; gap:6px; } .moves b { color:#d66b4e; font-size:24px; } .moves span { display:inline; }
.board { position:relative; aspect-ratio:1.05/1; margin:13px; overflow:hidden; border-radius:20px 20px 32px 32px; background:linear-gradient(135deg,#e8c09c,#cf976c); box-shadow:inset 0 0 0 8px #d8a57a,inset 0 -17px 25px #875b4429; touch-action:none; } .board::before { content:""; position:absolute; z-index:0; left:13%; right:13%; top:8%; bottom:-7%; border-radius:31% 31% 11% 11%; background:linear-gradient(105deg,#fffdfa,#ece9e6); box-shadow:inset 0 0 0 2px #ddd5d1,0 8px 14px #70422d2b; }
.lace-layer { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible; } .lace-path { fill:none; stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 2px 1px #2b1b1429); } .eyelet { position:absolute; z-index:4; width:34px; height:34px; margin:-17px; border:5px solid #c7c1bb; border-radius:50%; background:#fffdfa; box-shadow:0 2px 4px #58392b42; } .eyelet::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#746b69; } .end { position:absolute; z-index:7; width:30px; height:30px; margin:-15px; border:4px solid #fff; border-radius:50%; box-shadow:0 3px 6px #3a221f45; touch-action:none; transition:transform .16s,opacity .25s,box-shadow .16s; } .end::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#ffffff99; } .end.selected { transform:scale(1.18); box-shadow:0 0 0 5px #fff,0 0 0 8px #38303c,0 5px 12px #3a221f45; }
.game-foot { min-height:53px; color:#827979; font-size:12px; } .game-foot button { border:0; color:#b45c47; background:none; font-size:12px; font-weight:800; } .levels { margin-top:24px; } .section-title { display:flex; justify-content:space-between; margin:0 4px 11px; font-size:14px; font-weight:900; } .section-title small { color:#a79c98; font-size:10px; font-weight:700; } .level-list { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; } .level { aspect-ratio:1; border:1px solid #e8ddd6; border-radius:14px; color:#817672; background:#fffaf6; font-size:13px; font-weight:900; } .level.active { border-color:#df704e; color:#fff; background:#df704e; box-shadow:0 6px 12px #df704e3d; } .level.locked { color:#c6bcba; background:#eee8e3; }
.toast { position:fixed; z-index:20; left:50%; bottom:22px; transform:translate(-50%,15px); padding:10px 15px; border-radius:999px; color:#fff; background:#3d3540; font-size:12px; opacity:0; transition:.2s; pointer-events:none; } .toast.show { opacity:1; transform:translate(-50%,0); } .dialog { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:24px; background:#342a2b66; backdrop-filter:blur(5px); } .dialog-card { width:min(340px,100%); padding:31px 25px 23px; border-radius:26px; text-align:center; background:#fffdfa; box-shadow:0 22px 50px #271b2044; } .celebrate { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 10px; border-radius:16px; color:#fff; font-size:25px; background:#e67251; } .dialog h2 { margin:7px 0; font-size:30px; } .dialog p { color:#857d84; font-size:13px; } .stars { margin:16px 0; color:#efae47; letter-spacing:5px; font-size:25px; } .primary { width:100%; min-height:48px; border:0; border-radius:14px; color:#fff; background:#df704e; font-weight:900; box-shadow:0 7px 14px #df704e3b; } .text-button { margin-top:10px; border:0; color:#968b89; background:none; font-size:12px; }
@media (max-width:380px) { .intro { padding-top:18px; } .board { margin:10px; } .level-list { gap:6px; } }