: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:900px;margin:0 auto}.game-wrapper{display:grid;grid-template-columns:minmax(0,1fr) 300px;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;width:100%;height:auto;border-radius:var(--radius-sm);border:2px solid var(--color-border)}.controls-section{display:block}.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;touch-action:none;color:var(--color-text-primary)}.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: 900px) and (orientation: portrait),(max-width: 600px){body{padding:var(--space-sm)}.game-wrapper{grid-template-columns:1fr;gap:var(--space-lg);max-width:534px;margin:0 auto}.board-wrapper{order:1;padding:var(--space-md)}.info-section{order:2;padding:var(--space-lg)}.main-board{width:100%;max-width:500px;height:auto;margin:0 auto}.info-section h1{font-size:var(--font-size-xl)}.info-section>p{margin-bottom:var(--space-md)}.hud-message,.button-grid{margin-top:var(--space-md);margin-bottom:var(--space-md)}}@media (max-width: 480px){body{padding:6px;align-items:flex-start}.game-wrapper{gap:var(--space-md)}.board-wrapper{padding:10px}.info-section{min-width:0;padding:14px}.info-section>p{margin-bottom:10px}.hud-label{margin-bottom:10px}.hud-message,.button-grid{margin-top:10px;margin-bottom:10px}.button-grid button{width:56px;height:56px;font-size:var(--font-size-xl)}.control-up{width:56px!important}.horizontal-controls{max-width:186px;gap:6px}.restart-button{padding:14px}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.hud-message{animation:pulse 2s ease-in-out infinite}