:root{--background-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--primary-variant-color: #3700b3;--secondary-color: #03dac6;--text-color: #e0e0e0;--text-color-dark: #a0a0a0;--border-color: #333;--wheel-color-1: #ff7f50;--wheel-color-2: #87ceeb;--wheel-color-3: #da70d6;--wheel-color-4: #32cd32;--wheel-color-5: #ffc107;--wheel-color-6: #03a9f4}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--text-color);overflow-x:hidden}#root{display:flex;flex-direction:column;align-items:center;padding:2rem;min-height:100vh}.app-container{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:600px}h1{font-size:2.5rem;font-weight:700;color:var(--text-color);text-shadow:0 0 10px var(--primary-color);margin-bottom:1rem;text-align:center}.controls-container{display:flex;flex-direction:column;gap:1.5rem;width:100%;background-color:var(--surface-color);padding:1.5rem;border-radius:12px;border:1px solid var(--border-color)}.add-option-form{display:flex;gap:.5rem}.add-option-input{flex-grow:1;padding:.75rem 1rem;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;color:var(--text-color);font-size:1rem;transition:border-color .2s,box-shadow .2s}.add-option-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 5px var(--primary-color)}.add-option-button{padding:.75rem 1.5rem;background-color:var(--primary-color);color:#000;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.add-option-button:hover{background-color:#d0a3ff}.options-list{list-style:none;width:100%;display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto}.option-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:var(--background-color);border-radius:8px;font-size:1rem}.delete-option-button{background:none;border:none;color:var(--text-color-dark);cursor:pointer;font-size:1.2rem;line-height:1;transition:color .2s}.delete-option-button:hover{color:var(--secondary-color)}.wheel-container{position:relative;width:380px;height:380px;display:grid;place-items:center}.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:30px solid var(--secondary-color);z-index:10;filter:drop-shadow(0px 2px 3px rgba(0,0,0,.5))}.wheel-canvas,.time-disc-container,.spin-button{grid-column:1;grid-row:1}.wheel-canvas{width:100%;height:100%;transition:transform 7s cubic-bezier(.25,.1,.25,1);border-radius:50%;box-shadow:0 0 20px #00000080,inset 0 0 15px #0006;z-index:1}.wheel-canvas canvas{width:100%;height:100%;display:block}.time-disc-container{width:200px;height:200px;transition:transform 7s cubic-bezier(.25,.1,.25,1);z-index:2}.time-disc-container canvas{width:100%;height:100%;display:block;border-radius:50%}.spin-button{width:80px;height:80px;border-radius:50%;background-color:var(--surface-color);border:5px solid var(--text-color);color:var(--text-color);font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;text-transform:uppercase;z-index:5;transition:transform .2s,background-color .2s;-webkit-user-select:none;user-select:none}.spin-button:hover:not(:disabled){transform:scale(1.1);background-color:#2a2a2a}.spin-button:disabled{cursor:not-allowed;opacity:.7}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--surface-color);padding:2rem 3rem;border-radius:12px;border:1px solid var(--border-color);text-align:center;box-shadow:0 10px 30px #00000080;animation:modal-fade-in .3s ease-out;max-width:90%}.modal-content h2{font-size:1.5rem;color:var(--text-color-dark);margin-bottom:1rem}.modal-content p{font-size:2.2rem;font-weight:700;color:var(--secondary-color);margin-bottom:2rem;display:flex;flex-direction:column;gap:.25rem;align-items:center}.modal-content p span{font-size:1.5rem;font-weight:500;color:var(--text-color-dark)}.modal-close-button{padding:.75rem 2rem;background-color:var(--primary-color);color:#000;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.modal-close-button:hover{background-color:#d0a3ff}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.app-footer{width:100%;text-align:center;margin-top:auto;padding-top:2rem;color:var(--text-color-dark);font-size:.875rem}@media (max-width: 640px){h1{font-size:2rem}.wheel-container{width:300px;height:300px}.time-disc-container{width:150px;height:150px}.spin-button{width:60px;height:60px;font-size:1rem}.wheel-pointer{border-left-width:15px;border-right-width:15px;border-top-width:25px;top:-5px}}