body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}.landing-page{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;padding:2rem}.landing-container{max-width:1200px;width:100%;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.landing-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:3rem 2rem}.header-content{display:flex;align-items:center;justify-content:center;gap:2rem}.game-icon{width:100px;height:100px;border-radius:20px;box-shadow:0 4px 12px #0000004d}.landing-header h1{font-size:3rem;margin:0 0 1rem;font-weight:700}.tagline{font-size:1.25rem;margin:0;opacity:.95}.landing-main{padding:3rem 2rem}.hero-section{margin-bottom:3rem}.hero-content{display:flex;gap:3rem;align-items:center;flex-wrap:wrap}.hero-text{flex:1;min-width:300px}.hero-text h2{font-size:2rem;color:#333;margin-bottom:1rem}.hero-text p{font-size:1.1rem;color:#666;line-height:1.6}.hero-image{flex:1;min-width:300px;display:flex;justify-content:center}.hero-image img{max-width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px #0003}.video-section{margin-bottom:3rem}.video-section h3{text-align:center;font-size:1.75rem;color:#333;margin-bottom:2rem}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:800px;margin:0 auto;border-radius:12px;box-shadow:0 10px 30px #0003}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px}.features-section{margin-bottom:3rem}.features-section h3{text-align:center;font-size:1.75rem;color:#333;margin-bottom:2rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-card{background:#f8f9fa;border-radius:12px;padding:2rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00000026}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h4{font-size:1.25rem;color:#333;margin-bottom:.75rem}.feature-card p{color:#666;line-height:1.5;margin:0}.beta-section{margin-bottom:3rem;display:flex;justify-content:center}.beta-card{background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:16px;padding:3rem 2rem;text-align:center;max-width:600px;box-shadow:0 10px 30px #f5576c4d}.beta-card h3{color:#fff;font-size:2rem;margin:0 0 1rem}.beta-card p{color:#fffffff2;font-size:1.1rem;margin-bottom:2rem;line-height:1.6}.beta-button{display:inline-block;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;color:#f5576c;background:#fff;border:none;border-radius:50px;text-decoration:none;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 15px #0003}.beta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.beta-button:active{transform:translateY(0)}.cta-section{text-align:center;margin-top:3rem}.cta-button{display:inline-block;padding:1rem 3rem;font-size:1.25rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;text-decoration:none;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 15px #667eea66}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.cta-button:active{transform:translateY(0)}.landing-footer{background:#f8f9fa;text-align:center;padding:1.5rem;color:#666;border-top:1px solid #e0e0e0}.landing-footer p{margin:0}@media(max-width:768px){.header-content{flex-direction:column;gap:1.5rem}.game-icon{width:80px;height:80px}.landing-header h1{font-size:2rem}.tagline{font-size:1rem}.hero-content{flex-direction:column-reverse}.hero-text h2{font-size:1.5rem}.hero-text p{font-size:1rem}.features-grid{grid-template-columns:1fr}.cta-button{padding:.875rem 2rem;font-size:1.1rem}}.app{display:flex;flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem;box-shadow:0 2px 8px #0000001a;position:relative}header h1{margin:0;font-size:2rem}.home-link{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);color:#fff;text-decoration:none;font-size:1rem;font-weight:500;padding:.5rem 1rem;border-radius:6px;background:#fff3;transition:background .3s ease}.home-link:hover{background:#ffffff4d}.controls{background:#f5f5f5;padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;border-bottom:1px solid #ddd;transition:padding .3s ease}.controls.collapsed{padding:.5rem 1rem}.controls-header{width:100%;display:flex;justify-content:center;margin-bottom:.5rem}.controls.collapsed .controls-header{margin-bottom:0}.controls-collapse-btn{background:#667eea;color:#fff;border:none;border-radius:4px;padding:.3rem 1rem;cursor:pointer;font-size:1rem;font-weight:700;transition:background .2s}.controls-collapse-btn:hover{background:#5568d3}.control-group{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.controls label{display:flex;align-items:center;gap:.5rem;font-weight:500}.controls input[type=number]{padding:.5rem;border:1px solid #ccc;border-radius:4px;width:80px;font-size:1rem}.controls button{padding:.5rem 1rem;background:#667eea;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:background .2s}.controls button:hover{background:#5568d3}.controls button:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.controls button:disabled:hover{background:#ccc}.pattern-generator{background:#f0f7ff;padding:.75rem;border-radius:6px;border:2px solid #667eea}.pattern-btn{padding:.4rem .8rem;background:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s}.pattern-btn:hover{background:#218838;transform:translateY(-1px);box-shadow:0 2px 4px #0003}.pattern-btn:active{transform:translateY(0)}.validation-warning{background:#fff3cd;border:2px solid #ff4444;border-radius:6px;padding:1rem;margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}.warning-label{background:#f44;color:#fff;font-weight:700;padding:.25rem .75rem;border-radius:4px;display:inline-block;align-self:flex-start;font-size:.9rem}.warning-message{color:#856404;font-size:.9rem}.color-counts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.color-count-item{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.5rem;border-radius:4px;border:1px solid #ddd}.color-swatch-small{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.2);flex-shrink:0}.count-invalid{color:#f44;font-weight:700}.count-valid{color:#28a745;font-weight:700}.main-content{display:flex;flex:1;overflow:hidden}.color-palette{width:250px;background:#f9f9f9;border-right:1px solid #ddd;padding:1.5rem;overflow-y:auto;transition:width .3s ease,padding .3s ease}.color-palette.collapsed{width:70px;padding:1rem .5rem}.palette-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.palette-header h3{margin:0}.collapse-btn{background:#667eea;color:#fff;border:none;border-radius:4px;padding:.5rem .75rem;cursor:pointer;font-size:1.2rem;font-weight:700;transition:background .2s;min-width:36px}.collapse-btn:hover{background:#5568d3}.collapsed .collapse-btn{width:100%}.color-palette h3{margin-top:0;color:#333}.hint{font-size:.85rem;color:#666;margin-bottom:1rem;font-style:italic}.color-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;margin-bottom:.5rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s;position:relative}.color-item:hover{border-color:#667eea;transform:translate(4px)}.color-item:active{cursor:grabbing}.color-item.selected{background:linear-gradient(135deg,#667eea22,#764ba233);border-color:#667eea;border-width:3px;transform:translate(4px);box-shadow:0 2px 8px #667eea4d}.collapsed .color-item{padding:.5rem;justify-content:center}.selected-indicator{margin-left:auto;color:#667eea;font-size:1.2rem;font-weight:700}.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid rgba(0,0,0,.2);box-shadow:0 2px 4px #0000001a;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}.color-swatch-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.7rem;font-weight:700;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 3px rgba(0,0,0,.8);pointer-events:none}.color-name{font-size:.9rem;color:#333;font-weight:500;flex:1}.color-count{font-size:.85rem;padding:.25rem .5rem;border-radius:12px;background:#e0e0e0;color:#666;font-weight:600;min-width:3rem;text-align:center}.color-count.in-use{background:#e3f2fd;color:#1976d2}.color-count.at-capacity{background:#c8e6c9;color:#388e3c}.color-item.disabled{opacity:.5;cursor:not-allowed;border-color:#ccc}.color-item.disabled:hover{transform:none;border-color:#ccc}.deselect-btn{width:100%;margin-top:1rem;padding:.75rem;background:#ff6b6b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s}.deselect-btn:hover{background:#ee5a52}.tubes-container{flex:1;padding:1.5rem;overflow-y:auto;background:#fff}.tubes-container h3{margin-top:0;color:#333;text-align:center}.tubes-grid{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding:1rem;max-width:100%}.tube-wrapper{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0}.tube-content{display:flex;flex-direction:column;align-items:center}.tube-header{width:100%;margin-bottom:.25rem;font-size:.75rem;color:#666;font-weight:600;text-align:center}.tube-actions-row{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.25rem}.btn-icon{padding:.2rem .3rem;font-size:.7rem;background:#e8e8e8;color:#333;border:none;border-radius:3px;cursor:pointer;transition:all .2s;min-width:18px;display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:#667eea;color:#fff;transform:scale(1.1)}.btn-icon:active{transform:scale(.95)}.btn-danger{background:#f44;color:#fff;font-weight:700}.btn-danger:hover{background:#c00;color:#fff}.tube{width:50px;min-height:300px;background:linear-gradient(180deg,#f0f0f0,#e0e0e0);border:2px solid #999;border-radius:6px 6px 10px 10px;padding:.4rem;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 2px 8px #0000001a;transition:border-color .2s}.tube:hover{border-color:#667eea}.ball-slot{width:100%;height:36px;display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer;transition:all .2s}.ball-slot.empty{background:#ffffff4d;border:2px dashed #bbb;cursor:copy}.ball-slot.empty:hover{background:#667eea1a;border-color:#667eea;border-style:solid}.ball-slot.clickable{cursor:pointer}.ball-slot.clickable.empty{cursor:cell}.ball-slot.clickable:hover{background:#667eea33;border-color:#667eea;border-style:solid;border-width:2px}.ball{width:32px;height:32px;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003,inset -2px -2px 4px #0003,inset 2px 2px 4px #fff6;transition:transform .1s}.ball:hover{transform:scale(1.1)}.ball:active{transform:scale(.95)}.tube-count{margin-top:.5rem;font-size:.8rem;color:#666;text-align:center}footer{background:#f5f5f5;padding:1rem;text-align:center;border-top:1px solid #ddd;color:#666;font-size:.9rem}footer p{margin:0}.color-palette::-webkit-scrollbar,.tubes-container::-webkit-scrollbar{width:8px}.color-palette::-webkit-scrollbar-track,.tubes-container::-webkit-scrollbar-track{background:#f1f1f1}.color-palette::-webkit-scrollbar-thumb,.tubes-container::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.color-palette::-webkit-scrollbar-thumb:hover,.tubes-container::-webkit-scrollbar-thumb:hover{background:#555}.qr-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.qr-modal-content{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #0000004d;text-align:center;animation:slideUp .3s ease}.qr-modal-content h2{margin-top:0;color:#667eea}.qr-modal-content img{display:block;margin:1rem auto;border:2px solid #ddd;border-radius:8px}.qr-modal-content p{color:#666;margin:1rem 0}.qr-modal-content button{padding:.75rem 2rem;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .3s}.qr-modal-content button:hover{background:#764ba2}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.hex-string-display{padding:1rem;background:#fff;border:1px solid #ddd;border-radius:4px;margin:.5rem 1rem;font-family:monospace;word-break:break-all}.hex-string-display code{background:#f0f0f0;padding:.25rem .5rem;border-radius:3px;font-size:.9rem}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}