.yangle-container{display:flex;flex-direction:column;align-items:center;padding:12px 8px;width:100%;min-height:100vh;background:linear-gradient(180deg,#e8f5e9,#c8e6c9,#a5d6a7)}.yangle-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;width:100%;padding:0 8px}.back-btn{background:#fffc;border:none;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:600;color:#2e7d32;cursor:pointer;transition:transform .15s}.yangle-title{font-size:22px;font-weight:700;color:#2e7d32;text-shadow:0 1px 2px rgba(0,0,0,.1);letter-spacing:2px;margin:0}.yangle-level-select-container{display:flex;flex-direction:column;align-items:center;padding:16px 8px;min-height:100vh;background:linear-gradient(180deg,#e8f5e9,#c8e6c9)}.level-card-green{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);box-shadow:0 2px 8px #2e7d3226}.level-card-green:hover{box-shadow:0 4px 12px #2e7d3240}.level-card-green .level-card-id,.level-card-green .level-card-name{color:#2e7d32}.level-card-green.level-locked .level-card-id,.level-card-green.level-locked .level-card-name{color:#90a4ae}.yangle-info-bar{display:flex;gap:12px;margin-bottom:8px}.yangle-info{background:#ffffffb3;padding:4px 12px;border-radius:12px;font-size:13px;font-weight:600;color:#2e7d32}.yangle-timer{font-variant-numeric:tabular-nums}.result-level{font-size:14px;color:#90a4ae;margin-bottom:8px}.overlay-time{font-size:16px;color:#4caf50;font-weight:600;margin-bottom:12px}.result-btns{display:flex;flex-direction:column;gap:8px}.result-btn-back{background:#0000000f!important;color:#546e7a!important;box-shadow:none!important}.card-stack{position:relative;width:min(95vw,440px);height:580px;margin-bottom:16px}.card-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.stack-card{position:absolute;width:60px;height:60px;border-radius:8px;overflow:hidden;cursor:pointer;pointer-events:auto;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 2px 6px #0003;border:2px solid rgba(255,255,255,.6);background:#fff}.stack-card:active{transform:scale(.9)}.stack-card.blocked{cursor:not-allowed;opacity:.5;filter:brightness(.85);box-shadow:0 1px 3px #00000026;pointer-events:none}.stack-card:not(.blocked):hover{transform:scale(1.08);box-shadow:0 4px 12px #2e7d324d;z-index:100!important}.slot-area{display:flex;gap:4px;padding:8px 12px;background:#ffffffb3;border-radius:12px;box-shadow:0 4px 20px #0000001a;margin-bottom:16px;margin-top:16px}.slot-cell{width:60px;height:60px;border-radius:8px;background:#ffffff80;border:2px dashed #BDBDBD;overflow:hidden}.slot-cell img{border-radius:6px}.restart-btn-yangle{padding:10px 32px;border:none;border-radius:24px;background:linear-gradient(135deg,#43a047,#2e7d32);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 12px #2e7d324d}.restart-btn-yangle:hover{transform:translateY(-1px);box-shadow:0 4px 16px #2e7d3266}.restart-btn-yangle:active{transform:scale(.96)}.yangle-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.yangle-result{background:#fff;border-radius:20px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px #0003}.result-emoji{font-size:56px;margin-bottom:12px}.result-text{font-size:22px;font-weight:700;color:#2e7d32;margin-bottom:20px}.result-btn{padding:10px 32px;border:none;border-radius:24px;background:linear-gradient(135deg,#43a047,#2e7d32);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s}.result-btn:active{transform:scale(.96)}@media (max-width: 420px){.yangle-title{font-size:18px}.card-stack{transform:scale(.89);transform-origin:top left;height:390px}.slot-area{gap:2px;padding:6px 8px}.slot-cell{width:46px;height:46px}}.menu-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:24px;background:linear-gradient(180deg,#e3f2fd,#bbdefb)}.menu-title{font-size:32px;font-weight:800;color:#0277bd;letter-spacing:4px;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.menu-subtitle{font-size:16px;color:#546e7a;margin-bottom:32px}.menu-games{display:flex;flex-direction:column;gap:16px;width:min(90vw,320px)}.menu-card{display:flex;flex-direction:column;align-items:center;padding:24px;border:none;border-radius:16px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);box-shadow:0 4px 16px #0277bd33;cursor:pointer;transition:transform .15s,box-shadow .15s}.menu-card-green{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);box-shadow:0 4px 16px #2e7d3233}.menu-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px #0277bd4d}.menu-card-green:hover{box-shadow:0 6px 24px #2e7d324d}.menu-card:active{transform:scale(.97)}.menu-card-icon{font-size:40px;margin-bottom:8px}.menu-card-img{width:80px;height:80px;border-radius:12px;object-fit:cover;margin-bottom:10px;box-shadow:0 2px 8px #00000026}.menu-card-name{font-size:20px;font-weight:700;color:#0277bd;margin-bottom:4px}.menu-card-green .menu-card-name{color:#2e7d32}.menu-card-desc{font-size:13px;color:#546e7a}.game-header{display:flex;align-items:center;gap:12px;width:100%;padding:0 8px}.back-btn{background:#fffc;border:none;border-radius:20px;padding:6px 16px;font-size:14px;font-weight:600;color:#0277bd;cursor:pointer;transition:transform .15s}.back-btn:active{transform:scale(.95)}.game-container{display:flex;flex-direction:column;align-items:center;padding:16px 8px;width:100%;min-height:100vh;justify-content:flex-start}.game-title{font-size:22px;font-weight:700;color:#0277bd;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.1);letter-spacing:2px;flex:1;min-width:0;white-space:nowrap}.score-bar{display:flex;align-items:center;gap:12px;margin-top:16px;margin-bottom:8px;min-height:40px}.score{display:flex;align-items:baseline;gap:6px;background:#ffffffd9;padding:6px 16px;border-radius:20px;box-shadow:0 2px 8px #00000014}.score-label{font-size:14px;color:#78909c;font-weight:500}.score-value{font-size:22px;font-weight:700;color:#e65100}.combo-badge{background:linear-gradient(135deg,#ff6f00,#f44336);color:#fff;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:700;animation:comboPulse .5s ease;box-shadow:0 2px 8px #f443364d}@keyframes comboPulse{0%{transform:scale(.8)}50%{transform:scale(1.15)}to{transform:scale(1)}}.message-bar{height:32px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.message{background:#ffffffe6;padding:4px 16px;border-radius:16px;font-size:15px;font-weight:600;color:#0277bd;box-shadow:0 2px 8px #00000014;animation:messageIn .3s ease}@keyframes messageIn{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:4px;background:#fff9;border-radius:12px;box-shadow:0 4px 20px #0000001a;width:min(95vw,400px);aspect-ratio:1}.cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:6px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease;position:relative;aspect-ratio:1;overflow:hidden;border:2px solid rgba(255,255,255,.3)}.cell:active{transform:scale(.92)}.cell.selected{border-color:#ff6f00;box-shadow:0 0 0 2px #ff6f004d,0 2px 8px #ff6f0033;transform:scale(1.05);animation:selectedPulse .8s ease infinite}@keyframes selectedPulse{0%,to{box-shadow:0 0 0 2px #ff6f004d,0 2px 8px #ff6f0033}50%{box-shadow:0 0 0 4px #ff6f0033,0 2px 12px #ff6f004d}}.cell.matched{animation:matchPop .4s ease forwards}@keyframes matchPop{0%{transform:scale(1);opacity:1}30%{transform:scale(1.2);opacity:1}to{transform:scale(0);opacity:0}}.cell-label{position:absolute;bottom:0;left:0;right:0;font-size:8px;font-weight:600;line-height:1;white-space:nowrap;text-align:center;padding:2px 0;background:linear-gradient(transparent,#00000080);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}.cell-overlay{position:absolute;top:0;left:0;right:0;bottom:0;opacity:.55;pointer-events:none;border-radius:6px;mix-blend-mode:color}.restart-btn{margin-top:16px;padding:10px 32px;border:none;border-radius:24px;background:linear-gradient(135deg,#0288d1,#0277bd);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 12px #0277bd4d}.restart-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #0277bd66}.restart-btn:active{transform:scale(.96)}.level-select-container{display:flex;flex-direction:column;align-items:center;padding:16px 8px;min-height:100vh;background:linear-gradient(180deg,#e3f2fd,#bbdefb)}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;width:min(95vw,400px);margin-top:16px}.level-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:16px 8px;border:none;border-radius:12px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);box-shadow:0 2px 8px #0277bd26;cursor:pointer;transition:transform .15s,box-shadow .15s}.level-card:active{transform:scale(.96)}.level-card:hover{box-shadow:0 4px 12px #0277bd40}.level-card.level-locked{background:linear-gradient(135deg,#eceff1,#cfd8dc);box-shadow:none;cursor:not-allowed;opacity:.6}.level-card-id{font-size:28px;font-weight:800;color:#0277bd;line-height:1;margin-bottom:4px}.level-locked .level-card-id{color:#90a4ae}.level-card-name{font-size:15px;font-weight:700;color:#0277bd;margin-bottom:2px}.level-locked .level-card-name{color:#90a4ae}.level-card-desc{font-size:11px;color:#546e7a;text-align:center}.level-lock{position:absolute;top:8px;right:8px;font-size:16px}.time-badge{background:#ffffffd9;padding:4px 12px;border-radius:12px;font-size:16px;font-weight:700;color:#0277bd;box-shadow:0 2px 8px #00000014;min-width:48px;text-align:center}.overlay-time{font-size:16px;color:#4caf50;font-weight:600;margin-bottom:4px}.moves-badge{background:#ffffffd9;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:700;color:#0277bd;box-shadow:0 2px 8px #00000014}.moves-warning{background:linear-gradient(135deg,#ff6f00,#f44336);color:#fff;animation:movesPulse .6s ease infinite}@keyframes movesPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.progress-bar-container{width:min(95vw,400px);height:24px;background:#fff9;border-radius:12px;overflow:hidden;position:relative;margin-bottom:8px;box-shadow:inset 0 1px 3px #0000001a}.progress-bar{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:12px;transition:width .4s ease;min-width:0}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:#333;text-shadow:0 0 4px rgba(255,255,255,.8);white-space:nowrap}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;animation:overlayIn .3s ease}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.overlay-box{background:#fff;border-radius:20px;padding:32px 28px;text-align:center;min-width:280px;animation:boxIn .3s ease}@keyframes boxIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.overlay-win{box-shadow:0 8px 32px #4caf504d}.overlay-lose{box-shadow:0 8px 32px #f443364d}.overlay-title{font-size:28px;font-weight:800;margin-bottom:12px}.overlay-win .overlay-title{color:#4caf50}.overlay-lose .overlay-title{color:#f44336}.overlay-score{font-size:16px;color:#546e7a;margin-bottom:4px}.overlay-level{font-size:14px;color:#90a4ae;margin-bottom:20px}.overlay-btns{display:flex;flex-direction:column;gap:8px}.overlay-btn{border:none;border-radius:24px;padding:12px 32px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s}.overlay-btn:active{transform:scale(.96)}.overlay-btn-win{background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;box-shadow:0 3px 12px #4caf504d}.overlay-btn-retry{background:linear-gradient(135deg,#0288d1,#0277bd);color:#fff;box-shadow:0 3px 12px #0277bd4d}.overlay-btn-back{background:#0000000f;color:#546e7a}@media (max-width: 420px){.game-title{font-size:18px}.board{gap:1px;padding:3px}.cell-label{font-size:7px}.score-value{font-size:18px}}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 24px 24px;background:linear-gradient(180deg,#e3f2fd,#bbdefb)}.login-box{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center}.login-logo{width:80px;height:80px;border-radius:20px;margin-bottom:12px}.login-title{font-size:28px;font-weight:800;color:#0277bd;letter-spacing:4px;margin-bottom:16px}.login-tip{font-size:13px;color:#e65100;text-align:center;line-height:1.6;margin-bottom:24px}.login-field{width:100%;margin-bottom:12px}.login-field input{width:100%;box-sizing:border-box;padding:14px 16px;border:2px solid #B0BEC5;border-radius:12px;font-size:16px;outline:none;transition:border-color .2s;background:#fff}.login-field input:focus{border-color:#0288d1}.login-error{color:#d32f2f;font-size:14px;margin-bottom:12px;text-align:center}.login-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#0288d1,#0277bd);color:#fff;font-size:18px;font-weight:700;cursor:pointer;margin-top:4px}.login-btn:disabled{background:#b0bec5;cursor:not-allowed}.login-hint{font-size:12px;color:#78909c;margin-top:16px;text-align:center}.user-bar{display:flex;align-items:center;gap:8px;margin-top:8px}.user-bar-phone{font-size:14px;color:#546e7a}.user-bar-points{font-size:14px;color:#f57c00;font-weight:700}.menu-leaderboard-btn{width:100%;max-width:320px;padding:16px;margin-top:24px;border:none;border-radius:14px;background:linear-gradient(135deg,#ff6f00,#f57c00);color:#fff;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px #ff6f004d;letter-spacing:2px}.menu-points-bar{margin-top:12px;text-align:center}.menu-bottom{margin-top:auto;padding-top:24px;width:100%;max-width:320px}.menu-bottom-btns{display:flex;gap:16px;margin-top:8px}.menu-bottom-btn-weak{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:#90a4ae;font-size:13px;cursor:pointer}.leaderboard-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:16px;background:linear-gradient(180deg,#fff3e0,#ffccbc)}.leaderboard-tabs{display:flex;gap:8px;margin:16px 0;width:min(90vw,360px)}.leaderboard-tab{flex:1;padding:10px;border:2px solid #E57373;border-radius:10px;background:#fff;font-size:16px;font-weight:600;color:#c62828;cursor:pointer;transition:background .2s,color .2s}.leaderboard-tab.active{border-color:#d32f2f;background:#d32f2f;color:#fff}.leaderboard-level-tabs{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;width:min(90vw,360px)}.leaderboard-level-row{display:flex;gap:4px;justify-content:center}.leaderboard-level-tab{width:36px;height:32px;border:2px solid #FF6F00;border-radius:6px;background:#fff;font-size:13px;font-weight:700;color:#e65100;cursor:pointer;display:flex;align-items:center;justify-content:center}.leaderboard-level-tab.active{border-color:#e65100;background:#e65100;color:#fff}.leaderboard-loading,.leaderboard-empty{text-align:center;padding:40px;color:#8d6e63;font-size:16px;width:min(90vw,360px)}.leaderboard-list{display:flex;flex-direction:column;gap:8px;width:min(90vw,360px)}.leaderboard-row{display:flex;align-items:center;padding:12px 16px;background:#fff;border-radius:10px;gap:12px;box-shadow:0 2px 6px #d32f2f1a}.leaderboard-row-top{background:linear-gradient(135deg,#fff8e1,#ffecb3);box-shadow:0 2px 8px #ffc10733}.leaderboard-rank{width:32px;font-size:18px;font-weight:700;color:#d32f2f;text-align:center}.leaderboard-phone{flex:1;font-size:15px;color:#4e342e}.leaderboard-time{font-size:14px;color:#ff6f00;font-weight:600}.leaderboard-my-rank{text-align:center;padding:16px;font-size:16px;font-weight:700;color:#d32f2f;width:min(90vw,360px)}.my-page-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:24px;background:linear-gradient(180deg,#e3f2fd,#bbdefb)}.my-page-info{background:#fff;border-radius:12px;padding:16px;margin:16px 0;width:min(90vw,360px)}.my-page-row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px;color:#37474f}.my-page-section-title{font-size:16px;font-weight:700;color:#0277bd;margin:16px 0 8px;width:min(90vw,360px)}.my-page-empty{text-align:center;padding:16px;color:#78909c;font-size:14px;width:min(90vw,360px)}.my-page-records{background:#fff;border-radius:12px;padding:8px 16px;width:min(90vw,360px)}.my-page-record{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #E0E0E0;font-size:14px;color:#37474f}.my-page-record:last-child{border-bottom:none}.my-page-logout{display:block;width:min(90vw,360px);margin-top:32px;padding:14px;border:2px solid #B0BEC5;border-radius:12px;background:#fff;color:#78909c;font-size:16px;cursor:pointer}.my-page-settings-btn{background:none;border:none;font-size:20px;color:#546e7a;cursor:pointer;padding:4px 8px;margin-left:auto}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.settings-modal{width:min(90vw,360px);background:#fff;border-radius:16px;padding:20px;box-shadow:0 8px 32px #0003}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.settings-header h2{font-size:18px;font-weight:700;color:#0277bd;margin:0}.settings-close{background:none;border:none;font-size:20px;color:#78909c;cursor:pointer}.settings-tabs{display:flex;gap:8px;margin-bottom:16px}.settings-tab{flex:1;padding:8px;border:2px solid #B0BEC5;border-radius:8px;background:#fff;font-size:14px;font-weight:600;color:#546e7a;cursor:pointer}.settings-tab.active{border-color:#0277bd;background:#0277bd;color:#fff}.settings-form{display:flex;flex-direction:column;gap:12px}.settings-field label{display:block;font-size:13px;font-weight:600;color:#546e7a;margin-bottom:4px}.settings-field input{width:100%;padding:10px 12px;border:2px solid #E0E0E0;border-radius:8px;font-size:15px;outline:none;box-sizing:border-box}.settings-field input:focus{border-color:#0277bd}.settings-error{color:#d32f2f;font-size:14px;text-align:center}.settings-success{color:#2e7d32;font-size:14px;text-align:center}.settings-submit{padding:12px;border:none;border-radius:10px;background:#0277bd;color:#fff;font-size:16px;font-weight:600;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#e0f2fe,#bae6fd,#e0f7fa);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#root{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center}