:root{--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-sm: .85rem;--font-size-base: 1rem;--font-size-lg: 1.1rem;--font-size-xl: 1.4rem;--font-size-2xl: 2.5rem;--font-weight-normal: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--color-primary: #ec4899;--color-primary-light: #f472b6;--color-primary-dark: #db2777;--color-secondary: #8b5cf6;--color-secondary-light: #a78bfa;--color-secondary-dark: #7c3aed;--color-accent: #fbbf24;--color-accent-light: #fcd34d;--color-success: #10b981;--color-success-light: #34d399;--color-text-primary: #1f2937;--color-text-secondary: #4b5563;--color-text-muted: #6b7280;--color-text-inverse: #ffffff;--color-background: #ffffff;--color-background-secondary: #f9fafb;--color-border: rgba(236, 72, 153, .2);--color-border-strong: rgba(236, 72, 153, .3);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(236, 72, 153, .15);--shadow-lg: 0 8px 20px rgba(139, 92, 246, .2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:linear-gradient(135deg,#fef3c7,#fce7f3,#e0e7ff);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);overflow-x:hidden}#app{width:100%;max-width:1200px;margin:0 auto}.game-wrapper{display:grid;grid-template-columns:1fr auto;gap:var(--space-2xl);align-items:start}.board-wrapper{background:var(--color-background);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-lg);order:1}.main-board{display:block;border-radius:var(--radius-sm);border:2px solid var(--color-border)}.controls-section{display:none}.info-section{background:var(--color-background);border-radius:var(--radius-lg);padding:var(--space-2xl);box-shadow:var(--shadow-md);order:2;min-width:280px}.info-section h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm)}.info-section>p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-xl);line-height:1.5}.hud-label{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--space-md);display:flex;justify-content:space-between;align-items:center}.hud-label span{font-weight:var(--font-weight-bold);color:var(--color-primary);font-size:var(--font-size-xl)}.hud-message{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-secondary);text-align:center;padding:var(--space-md);background:var(--color-background-secondary);border-radius:var(--radius-md);margin:var(--space-xl) 0;min-height:48px;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}.button-grid{margin:var(--space-xl) 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.horizontal-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);width:100%;max-width:240px}.button-grid button{width:70px;height:70px;font-size:var(--font-size-2xl);border:2px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-background),var(--color-background-secondary));cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.button-grid button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--color-border-strong)}.button-grid button:active{transform:translateY(0);background:var(--color-background-secondary)}.control-up{width:70px!important;margin:0 auto}.control-down{grid-column:2}.restart-button{width:100%;padding:var(--space-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-inverse);background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.restart-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.restart-button:active{transform:translateY(0)}@media (max-width: 768px){body{padding:var(--space-sm)}.game-wrapper{grid-template-columns:1fr;gap:var(--space-lg)}.board-wrapper{order:1;padding:var(--space-md)}.controls-section{display:block;background:var(--color-background);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-md);order:2}.info-section{order:3;padding:var(--space-lg)}.info-section .button-grid{display:none}.main-board{width:100%;max-width:500px;height:auto;margin:0 auto}.info-section h1{font-size:var(--font-size-xl)}}@media (max-width: 480px){.info-section{min-width:0}.button-grid button{width:60px;height:60px;font-size:var(--font-size-xl)}.control-up{width:60px!important}.horizontal-controls{max-width:200px}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.hud-message{animation:pulse 2s ease-in-out infinite}