:root{--primary-color: #111827;--primary-hover: #374151;--text-main: #111827;--text-muted: #6b7280;--bg-color: #f8fafc;--card-bg: rgba(255, 255, 255, .75);--candy-red: linear-gradient(135deg, #ff6b6b, #ee5253);--candy-yellow: linear-gradient(135deg, #ffeaa7, #f1c40f);--candy-purple: linear-gradient(135deg, #a29bfe, #6c5ce7);--candy-orange: linear-gradient(135deg, #fab1a0, #e67e22);--candy-green: linear-gradient(135deg, #55efc4, #10ac84)}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{width:100%;max-width:480px;display:flex;flex-direction:column;gap:15px}.back-link{color:var(--text-muted);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .2s;align-self:flex-start}.back-link:hover{color:var(--primary-color)}.glass-card{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;padding:24px;box-shadow:0 10px 40px -10px #00000014,0 4px 6px -2px #0000000a;border:1px solid rgba(255,255,255,.4);text-align:center;display:flex;flex-direction:column;gap:20px}.title{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#111827,#4b5563);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-size:.95rem;color:var(--text-muted);margin-top:-10px}.game-info{display:flex;justify-content:space-between;gap:10px}.info-box{flex:1;background:#fff9;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:4px}.info-box .label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.05em}.info-box .value{font-size:1.4rem;font-weight:700;color:var(--primary-color)}.board-container{width:100%;aspect-ratio:1 / 1;background:#11182708;border:2px solid rgba(17,24,39,.05);border-radius:20px;padding:8px;display:flex;justify-content:center;align-items:center}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:6px;position:relative}.candy{width:100%;height:100%;border-radius:12px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:1.8rem;box-shadow:0 4px 6px #0000000f,inset 0 -4px #00000026;transition:transform .15s ease-out,opacity .15s ease-out;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none}.candy.candy-0{background:var(--candy-red)}.candy.candy-1{background:var(--candy-yellow)}.candy.candy-2{background:var(--candy-purple)}.candy.candy-3{background:var(--candy-orange)}.candy.candy-4{background:var(--candy-green)}.candy.selected{transform:scale(.9);outline:3px solid #6366f1;outline-offset:2px;box-shadow:0 0 15px #6366f180;z-index:10}.candy.matched{animation:popOut .25s forwards cubic-bezier(.175,.885,.32,1.275)}.candy.falling{animation:fallDown .25s ease-in}@keyframes popOut{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}to{transform:scale(0);opacity:0}}@keyframes fallDown{0%{transform:translateY(-20px)}to{transform:translateY(0)}}.reset-btn{background:var(--primary-color);color:#fff;border:none;border-radius:16px;padding:16px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 6px -1px #0000001a}.reset-btn:hover{background:var(--primary-hover)}.reset-btn:active{transform:scale(.98)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#11182799;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);justify-content:center;align-items:center;z-index:1000}.modal.active{display:flex}.modal-content{background:#fff;padding:40px 30px;border-radius:28px;width:90%;max-width:360px;text-align:center;box-shadow:0 25px 50px -12px #00000040;border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:15px;animation:modalIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.modal-content h2{font-size:2rem;font-weight:800;color:var(--primary-color)}.modal-content p{color:var(--text-muted)}.final-score{font-size:1.1rem;font-weight:500;background:#f3f4f6;padding:12px;border-radius:16px;margin:10px 0}.final-score span{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.level-container{display:flex;align-items:center;gap:12px;margin:5px 0}.level-badge{background:linear-gradient(135deg,#a29bfe,#6c5ce7);color:#fff;font-size:.9rem;font-weight:700;padding:6px 12px;border-radius:12px;box-shadow:0 4px 10px #6c5ce733;flex-shrink:0}.xp-bar-outer{flex-grow:1;height:22px;background:#1118270d;border:1px solid rgba(17,24,39,.03);border-radius:11px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.xp-bar-inner{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#10ac84,#2ecc71);transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:11px 0 0 11px}.xp-text{position:relative;z-index:5;font-size:.75rem;font-weight:700;color:var(--text-main);text-shadow:0 1px 1px rgba(255,255,255,.8)}.level-up-content{max-width:400px!important}.skill-choices{display:flex;flex-direction:column;gap:12px;margin-top:15px}.skill-card{background:#f3f4f6d9;border:1px solid rgba(17,24,39,.08);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:16px;cursor:pointer;text-align:left;transition:all .2s cubic-bezier(.16,1,.3,1)}.skill-card:hover{transform:translateY(-2px);background:#fff;border-color:#6c5ce7;box-shadow:0 8px 20px #6c5ce726}.skill-card:active{transform:scale(.98)}.skill-icon{font-size:1.8rem;background:#fff;width:48px;height:48px;display:flex;justify-content:center;align-items:center;border-radius:14px;box-shadow:0 4px 8px #0000000d;flex-shrink:0}.skill-details{display:flex;flex-direction:column;gap:2px}.skill-details h4{font-size:.95rem;font-weight:700;color:var(--primary-color)}.skill-details p{font-size:.8rem;color:var(--text-muted);line-height:1.3}.active-skills-bar{display:flex;justify-content:center;gap:12px;margin:10px 0 5px;width:100%}.active-skill-btn{background:#6c5ce714;border:1px solid rgba(108,92,231,.25);color:var(--primary-color);padding:10px 20px;border-radius:14px;font-size:.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 10px #6c5ce70d}.active-skill-btn:hover:not(:disabled){background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 6px 16px #6c5ce740;transform:translateY(-1px)}.active-skill-btn:active:not(:disabled){transform:scale(.97)}.active-skill-btn:disabled{opacity:.45;cursor:not-allowed;border-color:#1118271a;background:#11182708;color:var(--text-muted);box-shadow:none}.active-skill-btn.aiming{background:#ff4757;color:#fff;border-color:#ff4757;animation:activeGlow 1s infinite alternate}@keyframes activeGlow{0%{box-shadow:0 0 8px #ff475799}to{box-shadow:0 0 20px #ff4757e6}}.board.aiming-mode,.board.aiming-mode .candy{cursor:crosshair!important}.candy.aim-target{box-shadow:0 0 15px #ff4757,inset 0 0 10px #ff4757!important;transform:scale(1.05);z-index:8}.version-label{position:fixed;bottom:20px;left:20px;font-size:.85rem;color:#94a3b8;font-weight:500;z-index:100;pointer-events:none}@media (max-width: 480px){.container{padding:0 10px}.candy{font-size:1.5rem;border-radius:8px}.glass-card{padding:16px;gap:15px}}