*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#e0f0ff,#f0e6ff);min-height:100vh;display:flex;justify-content:center;padding:16px;color:#2d3748}#app{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:24px;padding:16px 0}.game-header h1{font-size:28px;font-weight:800;text-align:center;color:#4a3080}.mode-selector{display:flex;gap:8px}.mode-btn{padding:8px 20px;border:2px solid #c4b5fd;border-radius:20px;background:#fff;font-size:16px;font-weight:600;color:#6b5aad;cursor:pointer;transition:all .2s}.mode-btn:hover{background:#f3f0ff}.mode-btn.active{background:#7c5cbf;color:#fff;border-color:#7c5cbf}.difficulty-selector{display:flex;gap:8px}.difficulty-btn{padding:8px 20px;border:2px solid #c4b5fd;border-radius:20px;background:#fff;font-size:16px;font-weight:600;color:#6b5aad;cursor:pointer;transition:all .2s}.difficulty-btn:hover{background:#f3f0ff}.difficulty-btn.active{background:#7c5cbf;color:#fff;border-color:#7c5cbf}.target-display{display:flex;flex-direction:column;align-items:center;gap:4px}.target-label{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#8b7ab8}.target-number{font-size:56px;font-weight:800;color:#4a3080;text-shadow:0 2px 8px rgba(124,92,191,.2)}.timer-display{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 20px;background:#7c5cbf1a;border-radius:16px;border:2px solid #c4b5fd}.timer-text{font-size:24px;font-weight:700;color:#4a3080;font-variant-numeric:tabular-nums;min-width:48px;text-align:center}.number-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}.number-tiles.hard-mode{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:12px;max-width:280px}.number-tile{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;border:3px solid #d4c8ef;border-radius:16px;background:#fff;color:#4a3080;cursor:pointer;transition:all .15s ease;box-shadow:0 2px 8px #0000000f;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.number-tile:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.number-tile:active{transform:scale(.95)}.number-tile.selected{border-color:#f59e0b;background:#fef3c7;transform:scale(1.08);box-shadow:0 0 0 3px #f59e0b4d}.number-tile.selected.first{border-color:#f59e0b;background:#fef3c7}.number-tile.selected.second{border-color:#3b82f6;background:#dbeafe;box-shadow:0 0 0 3px #3b82f64d}.operation-buttons{display:flex;gap:12px}.op-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.op-btn:active{transform:scale(.9)}.op-add{background:#dcfce7;color:#16a34a;border-color:#86efac}.op-sub{background:#fee2e2;color:#dc2626;border-color:#fca5a5}.op-mul{background:#dbeafe;color:#2563eb;border-color:#93c5fd}.op-div{background:#fef3c7;color:#d97706;border-color:#fcd34d}.op-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.op-btn.selected{transform:scale(1.15);box-shadow:0 0 0 3px currentColor}.move-info{font-size:18px;font-weight:600;color:#6b5aad;min-height:28px;text-align:center}.preview{font-size:22px;color:#4a3080}.action-buttons{display:flex;gap:10px}.action-btn{padding:10px 20px;border:2px solid #d4c8ef;border-radius:12px;background:#fff;font-size:15px;font-weight:600;color:#6b5aad;cursor:pointer;transition:all .15s}.action-btn:hover{background:#f3f0ff;border-color:#b0a0d4}.action-btn:active{transform:scale(.95)}.game-message{font-size:16px;font-weight:600;color:#7c5cbf;text-align:center;padding:8px 16px;background:#7c5cbf1a;border-radius:10px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.win-content{background:#fff;border-radius:24px;padding:40px 48px;text-align:center;box-shadow:0 20px 60px #0003;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.win-stars{font-size:40px;margin-bottom:12px}.win-content h2{font-size:32px;color:#4a3080;margin-bottom:8px}.win-content p{font-size:18px;color:#6b5aad;margin-bottom:24px}.win-new-puzzle{font-size:18px!important;padding:12px 32px!important;background:#7c5cbf!important;color:#fff!important;border-color:#7c5cbf!important}.win-new-puzzle:hover{background:#6b4eab!important}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:200}.timeout-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.timeout-content{background:#fff;border-radius:24px;padding:40px 48px;text-align:center;box-shadow:0 20px 60px #0003;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)}.timeout-icon{font-size:48px;margin-bottom:12px}.timeout-content h2{font-size:32px;color:#4a3080;margin-bottom:8px}.timeout-content p{font-size:18px;color:#6b5aad;margin-bottom:24px}.timeout-new-puzzle{font-size:18px!important;padding:12px 32px!important;background:#7c5cbf!important;color:#fff!important;border-color:#7c5cbf!important}.timeout-new-puzzle:hover{background:#6b4eab!important}.challenge-stats{color:#6b5aad;font-weight:600;margin-left:8px}.challenge-results-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.challenge-results-content{background:#fff;border-radius:24px;padding:40px 48px;text-align:center;box-shadow:0 20px 60px #0003;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);min-width:320px}.challenge-icon{font-size:48px;margin-bottom:12px}.challenge-results-content h2{font-size:28px;color:#4a3080;margin-bottom:24px}.challenge-stats-box{background:#f3f0ff;border-radius:12px;padding:20px 24px;margin-bottom:24px}.stat-line{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin-bottom:12px}.stat-line:last-child{margin-bottom:0}.stat-label{color:#6b5aad;font-weight:600}.stat-value{color:#4a3080;font-weight:700;font-size:24px}.challenge-buttons{display:flex;gap:12px;justify-content:center}.challenge-play-again{font-size:18px!important;padding:12px 32px!important;background:#7c5cbf!important;color:#fff!important;border-color:#7c5cbf!important}.challenge-play-again:hover{background:#6b4eab!important}.challenge-copy{font-size:18px!important;padding:12px 32px!important;background:#fff!important;color:#7c5cbf!important;border-color:#7c5cbf!important;border-width:2px!important}.challenge-copy:hover{background:#f3f0ff!important}.challenge-copy.copied{background:#dcfce7!important;color:#16a34a!important;border-color:#16a34a!important}.challenge-share{font-size:18px!important;padding:12px 32px!important;background:#fff!important;color:#7c5cbf!important;border-color:#7c5cbf!important;border-width:2px!important}.challenge-share:hover{background:#f3f0ff!important}.challenge-share.copied{background:#dcfce7!important;color:#16a34a!important;border-color:#16a34a!important}.explanation-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.explanation-content{background:#fff;border-radius:24px;padding:32px 40px;text-align:center;box-shadow:0 20px 60px #0003;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);max-width:400px;width:90%}.explanation-icon{font-size:48px;margin-bottom:12px}.explanation-content h2{font-size:26px;color:#4a3080;margin-bottom:16px}.explanation-intro{font-size:16px;color:#6b5aad;margin-bottom:20px;font-weight:600}.explanation-steps{background:#f3f0ff;border-radius:12px;padding:16px 20px;margin-bottom:16px;text-align:left}.explanation-step{display:flex;gap:12px;align-items:center;font-size:16px;margin-bottom:12px}.explanation-step:last-child{margin-bottom:0}.step-number{color:#7c5cbf;font-weight:700;min-width:60px}.step-text{color:#4a3080;font-weight:600;font-size:18px}.explanation-target{font-size:16px;color:#16a34a;font-weight:600;margin-bottom:20px}.explanation-close{font-size:18px!important;padding:12px 32px!important;background:#7c5cbf!important;color:#fff!important;border-color:#7c5cbf!important}.explanation-close:hover{background:#6b4eab!important}@media (max-width: 480px){body{padding:8px}#app{gap:20px;padding:8px 0}.game-header h1{font-size:24px}.mode-selector,.difficulty-selector{gap:6px}.mode-btn,.difficulty-btn{padding:6px 16px;font-size:14px}.target-number{font-size:48px}.number-tiles.hard-mode{max-width:240px}.action-buttons{gap:8px}.action-btn{padding:8px 16px;font-size:14px}.win-content,.timeout-content,.challenge-results-content{padding:32px 24px;margin:16px}.win-content h2,.timeout-content h2{font-size:28px}.challenge-results-content{min-width:auto}.challenge-results-content h2{font-size:24px}.stat-line{font-size:16px}.stat-value{font-size:20px}.challenge-buttons{flex-direction:column}.challenge-play-again,.challenge-share,.win-new-puzzle,.timeout-new-puzzle{width:100%}.explanation-content{margin:16px;padding:24px 20px}.explanation-content h2{font-size:22px}.explanation-intro,.explanation-step{font-size:15px}.step-text{font-size:16px}}@media (max-width: 360px){.number-tile{width:60px;height:60px;font-size:24px}.op-btn{width:48px;height:48px;font-size:24px}.target-number{font-size:40px}.timer-text{font-size:20px;min-width:40px}.move-info{font-size:16px}.preview{font-size:18px}.mode-btn,.difficulty-btn,.action-btn{padding:6px 12px;font-size:13px}.number-tiles.hard-mode{max-width:200px;gap:8px}.explanation-content{padding:20px 16px}.explanation-content h2{font-size:20px}.step-number{min-width:50px}.step-text{font-size:14px}}@media (max-height: 600px) and (orientation: landscape){#app{gap:12px}.target-number{font-size:40px}.number-tile{width:60px;height:60px;font-size:24px}.op-btn{width:48px;height:48px;font-size:24px}}