:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#1a1a2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--color-primary: #667eea;--color-primary-dark: #5a6fd6;--color-secondary: #764ba2;--color-accent: #f093fb;--color-danger: #f5576c;--color-surface: #16213e;--color-surface-elevated: #1f2b4d;--color-border: rgba(255, 255, 255, .1);--color-text-primary: rgba(255, 255, 255, .95);--color-text-secondary: rgba(255, 255, 255, .7);--color-text-muted: rgba(255, 255, 255, .5);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(102, 126, 234, .3);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*{box-sizing:border-box}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-dark)}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}#root{width:100%;min-height:100vh}h1{font-size:2rem;line-height:1.2;margin:0}h2{font-size:1.5rem;line-height:1.3;margin:0}h3{font-size:1.125rem;line-height:1.4;margin:0}p{margin:0}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-surface-elevated);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-normal)}button:hover:not(:disabled){background-color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}button:focus,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.game-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100vh;max-width:1400px;margin:0 auto;padding:var(--spacing-md);gap:var(--spacing-lg)}@media(min-width:1024px){.game-layout{grid-template-columns:280px 1fr 280px;grid-template-rows:auto 1fr;padding:var(--spacing-xl);gap:var(--spacing-xl)}}.game-header{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}@media(min-width:1024px){.game-header{flex-direction:row;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl)}}.game-title-group{text-align:center}@media(min-width:1024px){.game-title-group{text-align:left}}.game-title{font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-subtitle{color:var(--color-text-muted);font-size:.875rem;margin-top:var(--spacing-xs)}.game-stats{display:flex;gap:var(--spacing-lg);align-items:center}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface-elevated);border-radius:var(--radius-md);min-width:80px}.stat-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.game-sidebar{display:none}@media(min-width:1024px){.game-sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg)}}.sidebar-panel{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.panel-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.panel-icon{font-size:1.25rem}.panel-title{font-size:.875rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.controls-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.control-btn{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:.9375rem;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:#fff;font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glow)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.control-btn.reset-btn{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-danger) 100%)}.control-btn.reset-btn:hover:not(:disabled){box-shadow:0 0 20px #f5576c66}.control-btn.shuffle-btn{background:linear-gradient(135deg,#f39c12,#e67e22)}.control-btn.shuffle-btn:hover:not(:disabled){box-shadow:0 0 20px #f39c1266}.inline-controls{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}@media(min-width:1024px){.inline-controls{display:none}}.rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-md)}.rule-item{display:flex;gap:var(--spacing-sm);align-items:flex-start;font-size:.875rem;color:var(--color-text-secondary);line-height:1.5}.rule-number{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center}.mobile-rules{display:block;margin-top:var(--spacing-lg)}@media(min-width:1024px){.mobile-rules{display:none}}.rules-toggle{width:100%;padding:var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.rules-content{margin-top:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.game-main{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.game-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);padding:var(--spacing-xl);box-shadow:var(--shadow-md)}.cups-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-lg);padding:var(--spacing-lg)}@media(min-width:1024px){.cups-grid{gap:var(--spacing-xl);padding:var(--spacing-xl)}}.cup-container{cursor:pointer;position:relative}.cup-label{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);font-size:.75rem;color:var(--color-text-muted)}.cup{width:56px;height:140px;background:linear-gradient(to bottom,#ffffff14,#ffffff08);border:2px solid rgba(255,255,255,.2);border-radius:0 0 12px 12px;overflow:hidden;position:relative;box-shadow:inset 0 0 15px #ffffff0d,0 8px 24px #00000040;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}@media(min-width:1024px){.cup{width:64px;height:160px}}.cup:before{content:"";position:absolute;top:0;left:4px;width:8px;height:100%;background:linear-gradient(to right,rgba(255,255,255,.2),transparent);pointer-events:none}.cup.selected{border-color:var(--color-primary);box-shadow:inset 0 0 15px #ffffff0d,0 8px 24px #00000040,0 0 24px #667eea80}.cup-container.locked{cursor:not-allowed}.cup.locked{border-color:#2ecc71;box-shadow:inset 0 0 15px #2ecc7133,0 8px 24px #00000040,0 0 16px #2ecc714d}.cup-lock-icon{position:absolute;top:-12px;left:50%;transform:translate(-50%);font-size:.875rem;z-index:10}.cup-inner{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column-reverse;height:100%}.liquid-layer{height:25%;transition:background-color .3s ease}.game-info{display:flex;align-items:center;gap:var(--spacing-md);color:var(--color-text-secondary);font-size:.875rem}.game-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg)}.game-modal{background:var(--color-surface);padding:var(--spacing-2xl);border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--color-border);max-width:400px;width:100%}.game-modal h2{font-size:1.75rem;margin-bottom:var(--spacing-sm)}.game-modal p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}.win-modal h2{color:#2ecc71}.lose-modal h2{color:var(--color-danger)}.modal-stats{display:flex;justify-content:center;gap:var(--spacing-lg);margin:var(--spacing-lg) 0;padding:var(--spacing-md);background:var(--color-surface-elevated);border-radius:var(--radius-md)}.modal-buttons{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-lg)}.game-container{max-width:1400px;margin:0 auto;padding:var(--spacing-lg)}.game-controls{display:flex;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-md)}@media(min-width:1024px){.game-controls{display:none}}.game-rules{display:block;margin-top:var(--spacing-lg);background:var(--color-surface);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}@media(min-width:1024px){.game-rules{display:none}}.game-rules h3{margin-bottom:var(--spacing-md);color:var(--color-primary)}.game-rules ul{padding-left:var(--spacing-lg);color:var(--color-text-secondary);margin:0}.game-rules li{margin-bottom:var(--spacing-sm);line-height:1.6}