:root{--color-background: #0c141c;--color-surface: #111c26;--color-surface-raised: #1b2c3a;--color-primary: #5eb8e8;--color-secondary: #00cec9;--color-accent: #fdcb6e;--color-success: #4caf6f;--color-danger: #d9534f;--color-warning: #f39c12;--color-text: #e9f1f6;--color-text-muted: #7594a6;--color-border: #243b4d}:root{--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--shell-max-width: 720px;--shell-padding: 16px}*{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app-shell{display:flex;flex-direction:column;min-height:100dvh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--shell-padding);border-bottom:1px solid var(--color-border)}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--shell-max-width);margin:0 auto;padding:var(--shell-padding)}.app-footer{padding:var(--shell-padding);text-align:center;color:var(--color-text-muted);font-size:.85rem}.game-board{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}@media (min-width: 768px){:root{--shell-max-width: 960px;--shell-padding: 24px}}.app-header{gap:12px}.app-header button{background:var(--color-surface-raised);color:var(--color-text);border:1px solid var(--color-border);border-radius:8px;padding:8px 14px;font-size:.9rem;cursor:pointer}.app-header button:hover{border-color:var(--color-primary)}.flow-hint{color:var(--color-text-muted);font-size:.9rem;margin:0;text-align:center}.flow-canvas{width:100%;max-width:560px;aspect-ratio:1 / 1;touch-action:none;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface)}.flow-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center}.flow-legend .swatch{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--color-text-muted)}.flow-legend .swatch:before{content:"";width:12px;height:12px;border-radius:3px;background:var(--swatch-color, currentColor)}.flow-legend .swatch[data-kind=R]{--swatch-color: #d9463a}.flow-legend .swatch[data-kind=Y]{--swatch-color: #e8c53d}.flow-legend .swatch[data-kind=B]{--swatch-color: #3d7fe8}.flow-legend .swatch[data-kind=O]{--swatch-color: #e8813d}.flow-legend .swatch[data-kind=G]{--swatch-color: #3fbf6b}.flow-legend .swatch[data-kind=P]{--swatch-color: #9a4fd9}.flow-legend .swatch[data-kind=GRAY]{--swatch-color: #7b8794}