:root{--primary-color: #6366F1;--background-light: #f0f4f8;--background-modal: #ffffff;--text-color-dark: #333;--text-color-light: #666;--border-color: #e0e0e0;--shadow-color: rgba(0, 0, 0, .1);--shadow-color-light: rgba(0, 0, 0, .05);--gradient-start: #FFC0CB;--gradient-end: #ADD8E6;--gradient-epic: #DA70D6;--gradient-legendary: #FFD700;--common-border: #c0c0c0;--rare-border: #87ceeb;--epic-border: #9370db;--legendary-border: #ffd700;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--pointer-glow: rgba(255, 255, 255, .8);--pointer-shadow: rgba(99, 102, 241, .5);--error-bg: #f8d7da;--error-text: #721c24;--error-border: #f5c6cb}body{margin:0;font-family:var(--font-family);background-color:var(--background-light);color:var(--text-color-dark);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}.app-container{width:100%;max-width:450px;height:100vh;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-end) 100%);box-shadow:0 10px 30px var(--shadow-color);border-radius:15px;display:flex;flex-direction:column;overflow:hidden;position:relative}.app-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background-color:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.app-header h1{margin:0;font-size:24px;color:var(--primary-color);font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.1)}.header-left{display:flex;align-items:center}.cloud-sync-indicator{font-size:12px;color:var(--text-color-light);margin-right:15px;background-color:#ffffff80;padding:5px 10px;border-radius:10px;border:1px solid var(--border-color);box-shadow:inset 0 0 3px #0000001a}.header-right{display:flex;gap:10px}.header-button{background:none;border:none;cursor:pointer;color:var(--text-color-dark);padding:5px;border-radius:5px;transition:background-color .3s ease,transform .2s ease}.header-button:hover{background-color:#0000001a;transform:scale(1.1)}.error-banner{position:absolute;top:70px;left:50%;transform:translate(-50%);background-color:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border);padding:10px 20px;border-radius:8px;display:flex;align-items:center;gap:8px;z-index:101;box-shadow:0 2px 10px #0000001a;animation:fadeInOut 5s ease-out forwards}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(-20px)}10%{opacity:1;transform:translate(-50%) translateY(0)}90%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.main-content{flex-grow:1;padding:20px;display:flex;justify-content:center;align-items:center;position:relative;overflow-y:auto}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:var(--text-color-light)}.loading-spinner{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:16px;font-weight:700}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:var(--text-color-light);padding:30px;background-color:#ffffff4d;border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.empty-state p{font-size:16px;margin:0}.start-screen,.drawing-screen,.shop-screen,.records-screen,.settings-screen{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}.prize-pool-preview{background-color:#fff9;padding:15px;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color-light);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:float 3s ease-in-out infinite}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.prize-pool-preview h2{margin-top:0;font-size:20px;color:var(--primary-color)}.prize-icons{display:flex;justify-content:center;gap:10px;margin-top:10px}.prize-icon{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ffffff80;box-shadow:inset 0 0 5px #0000001a;transition:transform .3s ease,box-shadow .3s ease}.prize-icon:hover{transform:scale(1.1);box-shadow:0 0 10px #fffc,inset 0 0 5px #0000001a}.rarity-common .prize-icon{border:2px solid var(--common-border)}.rarity-rare .prize-icon{border:2px solid var(--rare-border);box-shadow:0 0 8px var(--rare-border)}.rarity-epic .prize-icon{border:2px solid var(--epic-border);box-shadow:0 0 12px var(--epic-border)}.rarity-legendary .prize-icon{border:3px solid var(--legendary-border);box-shadow:0 0 15px var(--legendary-border),0 0 25px var(--legendary-border)}.prize-pool-preview p{font-size:14px;color:var(--text-color-light);margin-top:10px}.prompt-message{font-size:14px;color:var(--text-color-light);background-color:#ffffff80;padding:8px 15px;border-radius:20px;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 0 5px #0000001a}.status-indicators{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;margin-top:10px;font-size:14px;color:var(--text-color-light)}.indicator{display:inline-flex;align-items:center;gap:5px;background-color:#fff6;padding:5px 10px;border-radius:15px;box-shadow:inset 0 0 5px #0000001a;transition:transform .2s ease}.indicator:hover{transform:scale(1.05)}.pity-button{background:none;border:1px solid var(--primary-color);color:var(--primary-color);padding:5px 12px;border-radius:15px;cursor:pointer;font-size:14px;transition:all .3s ease;display:inline-flex;align-items:center;gap:5px}.pity-button:hover{background-color:var(--primary-color);color:#fff;transform:scale(1.05)}.drawing-screen{position:relative;justify-content:center;align-items:center}.wheel-container{position:relative;width:300px;height:300px;display:flex;justify-content:center;align-items:center;margin:20px auto}.wheel-background{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;object-fit:cover;box-shadow:0 0 20px #ffffffb3,0 0 40px #ffb6c180;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:.8}}.wheel-background.fallback-svg-bg{display:flex;justify-content:center;align-items:center;background:linear-gradient(45deg,var(--gradient-start),var(--gradient-end));border:5px solid rgba(255,255,255,.6);border-radius:50%}.wheel{position:absolute;top:50%;left:50%;transform-origin:center;width:280px;height:280px;border-radius:50%;display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 0 15px #0003}.wheel-segment{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;width:50%;height:50%;background:conic-gradient(from 0deg,#ffffff1a,#ffffff1a 10%,#fff0 10%);clip-path:polygon(50% 0%,100% 100%,0% 100%);display:flex;justify-content:center;align-items:flex-start;padding-top:10px;box-sizing:border-box}.wheel-segment.rarity-common{background:conic-gradient(from 0deg,var(--gradient-start) 0%,var(--gradient-end) 100%)}.wheel-segment.rarity-rare{background:conic-gradient(from 0deg,var(--rare-border) 0%,#87cefa 100%)}.wheel-segment.rarity-epic{background:conic-gradient(from 0deg,var(--epic-border) 0%,#9370db 100%)}.wheel-segment.rarity-legendary{background:conic-gradient(from 0deg,var(--gradient-legendary) 0%,#f0e68c 100%)}.segment-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform-origin:center;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.5);font-size:14px;pointer-events:none}.wheel-pointer{position:absolute;top:-15px;left:50%;transform:translate(-50%) scale(1);transform-origin:center bottom;opacity:.8;filter:drop-shadow(0 0 10px var(--pointer-shadow));pointer-events:none}.drawing-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006;z-index:10;pointer-events:none}.result-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--background-modal);padding:30px;border-radius:15px;box-shadow:0 10px 30px var(--shadow-color);z-index:20;display:flex;flex-direction:column;align-items:center;width:80%;max-width:350px;animation:popup-in .4s ease-out forwards}@keyframes popup-in{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.result-popup h3{margin-top:0;font-size:24px;color:var(--primary-color);margin-bottom:20px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.prize-display{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.prize-display .prize-name{font-size:18px;font-weight:700;margin-top:10px;margin-bottom:5px}.rarity-tag{font-size:12px;font-weight:700;padding:4px 8px;border-radius:5px;color:#fff;margin-top:5px}.rarity-tag.rarity-common{background-color:#aaa}.rarity-tag.rarity-rare{background-color:#87ceeb}.rarity-tag.rarity-epic{background-color:#9370db}.rarity-tag.rarity-legendary{background-color:gold}.close-result-button{padding:10px 20px;background:linear-gradient(45deg,var(--gradient-start),var(--gradient-end));color:#333;border:none;border-radius:20px;cursor:pointer;font-size:16px;transition:all .3s ease;box-shadow:0 4px 10px #ffc0cb66}.close-result-button:hover{background:linear-gradient(45deg,var(--gradient-end),var(--gradient-start));transform:translateY(-2px);box-shadow:0 6px 15px #ffc0cb99}.shop-screen h2{font-size:24px;color:var(--primary-color);margin-bottom:20px}.shop-prompt{margin-bottom:15px}.shop-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;width:100%}.shop-item{background-color:#ffffffb3;padding:15px;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color-light);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;border:2px solid transparent;transition:transform .3s ease,border-color .3s ease}.shop-item:hover{transform:translateY(-5px)}.shop-item.rarity-common{border-color:var(--common-border)}.shop-item.rarity-rare{border-color:var(--rare-border)}.shop-item.rarity-epic{border-color:var(--epic-border)}.shop-item.rarity-legendary{border-color:var(--legendary-border)}.shop-item p{font-size:13px;margin:8px 0;flex-grow:1;display:flex;align-items:center;min-height:40px}.shop-item .cost{font-size:14px;font-weight:700;color:var(--primary-color);display:flex;align-items:center;gap:5px;margin-bottom:10px}.shop-item button{padding:8px 15px;border:none;border-radius:15px;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:14px}.shop-item button:disabled{opacity:.5;cursor:not-allowed}.shop-item button:not(:disabled){background-color:var(--primary-color);color:#fff}.shop-item button:not(:disabled):hover{background-color:#5052b8;transform:translateY(-2px)}.fragments-indicator{margin-top:20px;font-size:16px;font-weight:700;color:var(--primary-color);display:flex;align-items:center;gap:8px;background-color:#ffffff80;padding:8px 15px;border-radius:20px;box-shadow:inset 0 0 5px #0000001a}.records-screen h2{font-size:24px;color:var(--primary-color);margin-bottom:20px}.record-list{list-style:none;padding:0;margin:0;width:100%;max-height:400px;overflow-y:auto;background-color:#ffffff80;border-radius:12px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 15px var(--shadow-color-light)}.record-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--border-color);font-size:14px;transition:background-color .3s ease}.record-item:last-child{border-bottom:none}.record-item:hover{background-color:#ffffffb3}.record-time{color:var(--text-color-light);flex-basis:30%;font-size:13px}.record-prize{font-weight:700;flex-basis:40%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-item .rarity-tag{flex-basis:25%;text-align:right;font-size:11px}.settings-screen h2{font-size:24px;color:var(--primary-color);margin-bottom:20px}.setting-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px;background-color:#fff9;border-radius:12px;margin-bottom:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 15px var(--shadow-color-light)}.setting-item label{font-size:16px;font-weight:700}.toggle-button{padding:8px 15px;border:none;border-radius:15px;cursor:pointer;font-weight:700;transition:all .3s ease;color:#fff;min-width:70px}.toggle-button.on{background-color:#4caf50}.toggle-button.off{background-color:#f44336}.pity-button-setting{padding:8px 15px;background-color:var(--primary-color);color:#fff;border:none;border-radius:15px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.pity-button-setting:hover{background-color:#5052b8;transform:translateY(-2px)}.pity-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.pity-modal{background-color:var(--background-modal);padding:30px;border-radius:15px;box-shadow:0 10px 30px var(--shadow-color);width:85%;max-width:400px;text-align:center;animation:popup-in .4s ease-out forwards}.pity-modal h3{margin-top:0;font-size:24px;color:var(--primary-color);margin-bottom:20px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.pity-bar-container{margin-bottom:20px}.pity-bar-container h4{font-size:16px;color:var(--text-color-dark);margin-bottom:10px;font-weight:600}.progress-bar{background-color:#ffffff80;border-radius:15px;height:25px;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 5px #0000001a}.progress-bar-fill{height:100%;border-radius:15px;transition:width .5s ease-out;position:absolute;top:0;left:0}.progress-bar-fill.epic{background:linear-gradient(90deg,var(--gradient-epic),#e0a0e0)}.progress-bar-fill.legendary{background:linear-gradient(90deg,var(--gradient-legendary),#f0e68c)}.progress-text{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;text-shadow:0 0 3px rgba(0,0,0,.5);font-size:13px}.close-pity-button{margin-top:20px;padding:10px 20px;background:linear-gradient(45deg,var(--gradient-start),var(--gradient-end));color:#333;border:none;border-radius:20px;cursor:pointer;font-size:16px;transition:all .3s ease;box-shadow:0 4px 10px #ffc0cb66}.close-pity-button:hover{background:linear-gradient(45deg,var(--gradient-end),var(--gradient-start));transform:translateY(-2px);box-shadow:0 6px 15px #ffc0cb99}.keyboard-hint-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.keyboard-hint-modal{background-color:var(--background-modal);padding:30px;border-radius:15px;box-shadow:0 10px 30px var(--shadow-color);width:85%;max-width:400px;text-align:left;animation:popup-in .4s ease-out forwards}.keyboard-hint-modal h3{margin-top:0;font-size:24px;color:var(--primary-color);margin-bottom:20px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.key-hint{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:16px}.key{background-color:#6366f133;color:var(--primary-color);padding:5px 10px;border-radius:5px;font-weight:700;font-family:monospace;border:1px solid rgba(99,102,241,.4)}.close-hint-button{margin-top:20px;padding:10px 20px;background:linear-gradient(45deg,var(--gradient-start),var(--gradient-end));color:#333;border:none;border-radius:20px;cursor:pointer;font-size:16px;transition:all .3s ease;box-shadow:0 4px 10px #ffc0cb66}.close-hint-button:hover{background:linear-gradient(45deg,var(--gradient-end),var(--gradient-start));transform:translateY(-2px);box-shadow:0 6px 15px #ffc0cb99}.app-footer{padding:15px 20px;background-color:#ffffffb3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-top:1px solid var(--border-color);display:flex;flex-direction:column;ali}