:root{--bg: #fff6e9;--card: #ffffff;--ink: #6b4a33;--ink-soft: #ad8970;--accent: #ff9e7a;--line: #ffe3c7;--shadow: 0 10px 26px rgba(206, 150, 104, .16)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Nunito,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(circle at 18% 0%,#ffefda 0%,var(--bg) 46%,#ffe8d1 100%);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}.game{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-paw{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:15px;background:linear-gradient(150deg,#ffe6c9,#ffd2ae);font-size:20px;box-shadow:0 5px #f6d7ba}.brand-text h1{margin:0;font-size:21px;font-weight:800;letter-spacing:.2px;color:#6a4530}.brand-text p{margin:1px 0 0;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{flex:0 0 auto;width:42px;height:42px;border:2px solid var(--line);border-radius:15px;background:#fffdf9;font-size:18px;cursor:pointer;display:grid;place-items:center;box-shadow:0 5px #f4ddc5;transition:transform .12s ease,box-shadow .12s ease}.icon-btn:active{transform:translateY(3px);box-shadow:0 2px #f4ddc5}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:var(--card);border:2px solid #fff2e3;border-radius:18px;padding:8px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:0}.stat-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--ink-soft)}.stat-value{font-size:21px;font-weight:800;line-height:1.15;color:#ef8d5f;animation:score-pop .3s ease-out}@keyframes score-pop{0%{transform:scale(1.32)}to{transform:scale(1)}}.dog-icon{display:block;flex:0 0 auto}.playfield{position:relative;width:100%;max-width:420px;margin:0 auto;aspect-ratio:360 / 600;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#fffdf8,#fff3e1 58%,#ffe7cd);border:3px solid #ffe2c5;box-shadow:inset 0 -14px 26px #f0be8c33,0 8px 20px #d8a07029;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}@media (min-height: 700px){.playfield{width:min(100%,calc((100dvh - 268px)*.6))}}.playfield canvas{display:block;width:100%;height:100%}.footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.hint{margin:0;font-size:11px;line-height:1.4;color:var(--ink-soft)}.next-preview{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-soft)}.restart-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:none;border-radius:16px;background:linear-gradient(160deg,#ffb98e,#ff9d74);color:#fff;font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 5px #ee8558;transition:transform .12s ease,box-shadow .12s ease}.restart-btn:active{transform:translateY(3px);box-shadow:0 2px #ee8558}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#6b4a3352;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade-in .2s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{width:min(100%,320px);padding:22px 22px 20px;border-radius:26px;background:#fffdf9;border:3px solid #ffe6cc;box-shadow:0 18px 40px #9666423d;text-align:center;animation:modal-pop .28s cubic-bezier(.2,1.3,.5,1)}@keyframes modal-pop{0%{transform:scale(.86) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-dog{display:flex;justify-content:center;margin-top:-62px;margin-bottom:4px}.modal h2{margin:6px 0 4px;font-size:19px;color:#7a5138}.modal-sub{margin:0 0 14px;font-size:12px;color:var(--ink-soft)}.modal-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.modal-scores div{padding:10px 8px;border-radius:16px;background:#fff5e8;display:flex;flex-direction:column;gap:2px}.modal-scores span{font-size:11px;color:var(--ink-soft);font-weight:700}.modal-scores strong{font-size:22px;color:#ef8d5f}.primary-btn{width:100%;padding:13px 16px;border:none;border-radius:18px;background:linear-gradient(160deg,#ffb98e,#ff986e);color:#fff;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:.6px;cursor:pointer;box-shadow:0 5px #ee8558;transition:transform .12s ease,box-shadow .12s ease}.primary-btn:active{transform:translateY(3px);box-shadow:0 2px #ee8558}.victory-overlay{z-index:100;background:radial-gradient(circle at 50% 30%,#ffd67880,#6b4a339e)}.victory-modal{background:linear-gradient(165deg,#fffdf4,#fff2c9 55%,#ffe29a);border-color:#ffd76a;box-shadow:0 18px 46px #b4781452}.victory-modal h2{font-size:21px;color:#e8562a;text-shadow:0 2px 0 #fff,0 0 18px rgba(255,180,60,.45)}.victory-modal .modal-sub{color:#a8763d}.victory-score{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 16px;padding:12px;border-radius:16px;background:#ffffffb8;font-size:12px;font-weight:700;color:#a8763d}.victory-score strong{font-size:28px;color:#f0823c}@media (max-width: 360px){.brand-text h1,.stat-value{font-size:18px}.hint{font-size:10px}}.mock-panel{position:fixed;right:12px;bottom:12px;z-index:30;width:206px;padding:10px;display:flex;flex-direction:column;gap:8px;border:2px solid var(--line);border-radius:16px;background:#fffdf9f5;box-shadow:var(--shadow);font-size:11px}.mock-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.mock-gallery figure{margin:0;text-align:center}.mock-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#fff3e1}.mock-gallery figcaption{font-size:9px;color:var(--ink-soft)}.mock-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.mock-actions button{padding:5px 4px;border:1px solid var(--line);border-radius:8px;background:#fff8ee;color:var(--ink);font-family:inherit;font-size:10px;cursor:pointer}.mock-actions button:active{transform:translateY(1px)}.mock-tip{margin:0;color:var(--ink-soft)}